Skip to content

Instantly share code, notes, and snippets.

@maccath
Created December 13, 2012 15:34
Show Gist options
  • Save maccath/4277198 to your computer and use it in GitHub Desktop.
Save maccath/4277198 to your computer and use it in GitHub Desktop.
Live filtering in jqGrid. Povides a search box at the top of your grid allowing you to filter the rows on the current page by your input value. If your input matches any data in any of the cells of a particular row, that row will be shown whilst others will be hidden. Matches against all columns dynamically.
$(function() {
var $grid = $('#yourGridId'); // @todo: Insert your grid selector
var gridData;
var rowIds;
$grid.jqGrid({
// @todo: Insert your grid configuration
loadComplete : function (data) {
gridData = $grid.jqGrid('getRowData');
for (var key in gridData[0]) {
rowIds = $grid.jqGrid('getCol', key, true);
break;
}
},
caption : '<input type="search" id="gridsearch" placeholder="Search" results="0" />'
});
$('#gridsearch').on('keyup', function() {
// You can't search unless grid values have been loaded
if (typeof gridData != "undefined" && typeof rowIds != "undefined") {
var searchString = $(this).val().toLowerCase();
$.each(gridData, function(id, row) {
var show = false;
$.each(row, function(id, cell) {
if(cell.toLowerCase().indexOf(searchString) >= 0) {
show = true;
return false;
}
});
var $row = $('#'+rowIds[id].id);
if (show) {
$row.show();
} else {
$row.hide();
}
});
}
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment