[jQuery] search feature and sorting not working
Hey i am using flexigrid in my application the flexigrid gets loaded
but when i search in flexigrid it is not getting loaded..
the problem is my page is not static all data comes dynamically
throguh ajax..
here is the sample
<div>
<table id="list_table" border="0" cellpadding="0"
cellspacing="0" class="display">
<thead>
<tr>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
<script type="text/javascript">
var arrays = [];
var username = [];
username[0] = "Abhilash";
username[1] = "kuldip";
username[2] = "posjjn";
username[3] = "Aaaaaaaa";
username[4] = "bbbbbbbb";
username[5] = "ccccccc";
username[6] = "ssss";
username[7] = "dhskdsk";
username[8] = "llmmjjuyu";
username[9] = "Aaaaaaaa";
username[10] = "ttrrrrr";
username[11] = "jjkk";
username[12] = "vvddd";
username[13] = "eeeeeeee";
username[14] = "ffffffff";
username[15] = "gggggggg";
username[16] = "hhhhhhhhhhh";
username[17] = "iiiiiii";
username[18] = "jjjjjjj";
username[19] = "kkkkkk";
username[20] = "llllll";
username[21] = "mmmmmm";
username[22] = "nnnnnn";
for (i = 0; i < 20; i++) {
var dataSet = [];
dataSet[0] = i;
dataSet[1] = username[i];
dataSet[2] = 'xyz';
dataSet[3] = '1';
dataSet[4] = '29\07\2009';
arrays[i] = dataSet;
}
set_list_table_data(arrays);
$("#list_table").flexigrid(
{
colModel: [
{ display: 'ID', name: 'id', width: 20, sortable: true, align:
'left', hide: true },
{ display: 'Name', name: 'name', width: 230, sortable: true,
align: 'left' },
{ display: 'Controlling Authority', name: 'ca', width: 130,
sortable: true, align: 'left' },
{ display: 'Revision', name: 'revision', width: 40, sortable:
true, align: 'right' },
{ display: 'Last Modified', name: 'last_modified', width: 100,
sortable: true, align: 'right' }
],
searchitems: [
{ display: 'Name', name: 'name', isdefault: true },
{ display: 'Controlling Authority', name: 'ca' },
{ display: 'Last Modified', name: 'last_modified' }
],
sortname: "name",
sortorder: "asc",
usepager: true,
title: 'Time Zones',
useRp: true,
rp: 10,
showTableToggleBtn: true,
width: 'auto',
height: 200
}
);
</script>
</div>
and my function set_list_table_data is something like this..
var list_data = null; // TEMP used for sorting that is not fully
implemented yet.
function set_list_table_data(data_array) {
var table_rows = "";
if (data_array !== null && data_array.length > 0) {
list_data = data_array;
$.each(data_array, function(index, data_item) {
table_rows += "<tr>";
for (var i = 0; i < data_item.length; i++) {
table_rows += "<td>";
table_rows += data_item[i];
table_rows += "</td>";
}
table_rows += "</tr>";
});
$('#list_table tbody').html(table_rows);
}
}
can you please help me do this..
One things do we need to write code explicilty for search and sorting
or flexigrid does automatically.....