[jQuery] search feature and sorting not working

[sushil]

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.....