Created
December 13, 2012 15:34
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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