Jquery dynamic loading of rows into a table not working when tried to sort by column

Question

I am calling fixheadertable jquery during document ready. After that we are adding dynamic rows to the table (id=test) based on some search results. Code:

$(document).ready(function(){
    $("#test").fixheadertable({
        caption : '',
        colratio : [50, 50, 50, 50]       
    });
}

Below code gets executed when we enter the search criteria. This will add the results into the table.

…………..
for ( var i = 0; i<size; i++) {
    $("#test").append('<tr><td>'+i.col1+'</td></tr><tr><td>'+i.col2+'</td></tr>');
}
………..
………….

Now if we click on the column header the data get vanished. We need this to sort the table contents. I have tried with some static data for the table and it worked fine. But it is not working when we add rows after the page load is done.

It looks like once the page is loaded the call to fixheadertable function in another jquery is not called. Any idea? Please help.

Answer 1

You may need to call the fixheadertable() wrapper method on the table element each time you update the data on the table, not only when the document ready.

Try it.......

function populateData(){
    .....................
    for ( var i = 0; i<size; i++) {
         $("#test").append('<tr><td>'+i.col1+'</td></tr><tr><td>'+i.col2+'</td></tr>');
    }

    $("#table").fixheadertable({
        caption : '',
        colratio : [50, 50, 50, 50]       
    });
}