Home/ Questions/Q 8962683
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T16:11:05+00:00

Having a problem with toolbar search on local data in jqGrid. I’ve found what

  • 0

Having a problem with toolbar search on local data in jqGrid.

I’ve found what look like fixes for earlier versions here but the way I understand the documentation this is built-in since V3.7 (I’m using 4.4).

If you’re curious about the field names, it’s a web interface to a herd management system for an Alpaca farm

Why the ajax in jquery rather than just pulling the XML into jqGrid? The XML (which is outside of my control) is not well formed – every time I tried it inside jqGrid, it failed, hence the XML -> DOM -> Object conversion.

The Grid loads, displays, pages and sorts perfectly

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" />

<script src="jqGrid/js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="jqGrid/js/jquery.jqGrid.min.js" type="text/javascript"></script>
<style>
#list td {
font-size: .6em;
}

.ui-pg-input{
    height: initial !important;
}
</style> 
<script type="text/javascript">
pacaURL = "/alpaca/proxy.php?url=localhost:9002/rest/alpaca";
$(function(){ 
var pData = new Array();
$.ajax({
    url:pacaURL, 
    success:function(data){
        pacaData = $.parseXML(data);
        console.log(pacaData);

        $(pacaData).find("AlpacaListing").each(function(){
            pData.push({
                Name: $(this).find("Name").text(),
                Age: FormatDate($(this).find("DOB").text()),
                Colour: $(this).find("Colour").text(),
                IAR: $(this).find("IAR").text(),
                Sex: $(this).find("Sex").text(),
                Sire: $(this).find("SireName").text(),
                Dam: $(this).find("DamName").text()
            });
        });
        console.log(pData);
        makeGrid(pData);
    },
    complete:function(data){
        console.log("COMPLETE");
    }
});


}); 

function makeGrid(pData) {
$("#list").jqGrid({
    datatype:'local',
    data: pData,
    colNames:['Name','Age(M)', 'Colour','IAR','Sex','Sire', 'Dam'],
    colModel :[ 
    {name:'Name', index:'Name', width:180}, 
    {name:'Age', index:'Age', width:90, align:'right', sorttype:'int'}, 
    {name:'Colour', index:'Colour', width:150}, 
    {name:'IAR', index:'IAR', width:70, align:'right', sorttype:'int'}, 
    {name:'Sex', index:'Sex', width:70}, 
    {name:'Sire', index:'Sire', width:180},
    {name:'Dam', index:'Dam', width:180}
    ],
    pager: '#pager',
    rowNum:20,
    rowList:[10,20,30],
    loadonce: true,
    sortname: 'Name',
    sortorder: 'desc',
    viewrecords: true,
    gridview: true,
    caption: 'The Herd'
}); 

$('#list').jqGrid('filterToolbar', { stringResult:true, searchOnEnter: false });
}

function FormatDate(sqlDate){
b=new Date(sqlDate);
d= new Date(new Date() - b);

return (d.getYear() - 70) * 12 + d.getMonth();
}
</script>

</head>
<body>
<table id="list"><tr><td/></tr></table> 
<div id="pager"></div> 
</body>
</html>

As soon as I start to type anything in one of the search boxes, everything blanks out.

What am I missing?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Several months later, but just seen the comment from Jeff suggesting that I add an answer rather than just a comment about my error. Here goes…

    The problem was one of user-error or, rather, user interpretation.

    The code was working perfectly, just not the way that I was expecting it to. The default behavior for search in jqgrid is to treat the entered search term as case sensitive and to do a simple left-to-right comparison

    • 0