jQuery Tablesorter dynamically load CSV

问题

Okay this is driving me crazy.

I've got a csv file that I am loading dynamically to an html table with CSVToTable and then sorting it with Tablesorter.

The issue I am running into is when I attempt to apply Tablesorter widgets like "filter" they will not apply.

But when I copy the dynamically loaded html table and copy and paste them into my source code they run without a problem.

Can someone please explain to me why this is happening and how I can dynamically load my CSV file and apply Tablesorter widgets?

You can view my code here: http://cdemeke.com/Chris_Test/Test14/test4.html

Thank you so much in advance!

回答1:

When the CSVToTable script is initialized it triggers a loadComplete event which then has the code to initialize tablesorter. Here is the code that needs modifying:

$('#CSVTable2')
    .CSVToTable('test2.csv', {
        loadingImage: 'images/loading.gif',
        startLine: 1,
        headers: ['Project Number', ...]
    })
    .bind("loadComplete",function() {
        $('#CSVTable2').find('table')
            .tablesorter({
                widthFixed: true,
                widgets: ['zebra', 'filter']
            })
            .tablesorterPager({
                container: $("#pager")
            });
    });

Also, at the top of your jquery.tablesorter.js file, is this code:

$(function() {
    $("table")
        .tablesorter({widthFixed: true, widgets: ['zebra']})
        .tablesorterPager({container: $("#pager")});
});

I think removing it from here would be a good idea since the order of initialization might be an issue in some browsers. It shouldn't be finding a table since it hasn't been built yet, but if it does, it will force all the tables it finds to use the pager. The extra parameters for tablesorter will be ignored if the table has already been initialized.

来源：https://stackoverflow.com/questions/17656696/jquery-tablesorter-dynamically-load-csv

标签

javascript

jquery

dynamic

tablesorter