Adding columns dynamically to a table managed with jQuery's tablesorter

问题

On a web page that has a table that is being sorted by jQuery's tablesorter, there is functionality to add columns to the table dynamically. When this happens I call trigger("update") and trigger("appendCache") to get tablesorter to be able to sort by the new column (I have also tried calling tablesorter() again). However, the widgets for sorting do not appear in the new column(s) until I click in the header cells.

My question is does anybody know how to get the widgets to appear immediately? Thanks Regards Jason

回答1:

   <head>

    <title>jQuery plugin: Tablesorter 2.0</title>

    <link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />

    <link rel="stylesheet" href="../themes/blue/style.css" type="text/css" media="print, projection, screen" />

    <script type="text/javascript" src="../jquery-latest.js"></script>

    <script type="text/javascript" src="../jquery.tablesorter.js"></script>

    <script type="text/javascript">

    $(function() {      

$(document).ready(function()
    {
        $("#myTable").tablesorter();
    }
);


    }); 
    function append(){
        var table = $("#myTable");
        $(table).remove();
        var tr = $("<tr></tr>");
        $("<td></td>").html('Test').appendTo(tr);
        $("<td></td>").html('test').appendTo(tr);
        $("<td></td>").html('test@gmail.com').appendTo(tr);
        $("<td></td>").html('$5.00').appendTo(tr);
        $("<td></td>").html('http://www.test.com').appendTo(tr);
        $(tr).appendTo(table);
        $(table).appendTo($('#tableholer'));
        $("#tableholer table").tablesorter();
    }

    </script>

</head>
<body>
    <div id="tableholer">
    <table id="myTable" class="tablesorter">
    <thead>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>Email</th>
        <th>Due</th>
        <th>Web Site</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Smith</td>
        <td>John</td>
        <td>jsmith@gmail.com</td>
        <td>$50.00</td>
        <td>http://www.jsmith.com</td>
    </tr>
    <tr>
        <td>Bach</td>
        <td>Frank</td>
        <td>fbach@yahoo.com</td>
        <td>$50.00</td>
        <td>http://www.frank.com</td>
    </tr>
    <tr>
        <td>Doe</td>
        <td>Jason</td>
        <td>jdoe@hotmail.com</td>
        <td>$100.00</td>
        <td>http://www.jdoe.com</td>
    </tr>
    <tr>
        <td>Conway</td>
        <td>Tim</td>
        <td>tconway@earthlink.net</td>
        <td>$50.00</td>
        <td>http://www.timconway.com</td>
    </tr>
    </tbody>
    </table>
    </div>
    <input type="button" onclick="append()" value="append"/>
</body>

In case of append this would work. in case of delete try same though i am never sure

回答2:

According to this GitHub feature:

You can now use the updateAll method to update the table cache after adding a new column of data. Here is a demo:

var $table = $('table').tablesorter({
        theme: 'blue',
        widgets: ['zebra', 'columns']
    }),
    // column index
    index = 0,
    // column data to add to the table
    columns = ['firstName', 'lastName', 'phone|format', 'streetAddress',
        'email', 'city', 'usState|abbr'];

$('button').click(function () {
    var url = "http://www.filltext.com/?callback=?";
    $.getJSON(url, {
        'rows': 10, // number of rows in the table
        'data': '{' + columns[index] + '}'
    })
    .done(function (data) {
        // add new header cell
        $table.find('thead tr').append('<th>' + columns[index].split('|')[0] + '</th>');
        // increment index to next column
        index = (index + 1) % columns.length;
        // add new cell to each tbody row
        $.each(data, function (i, item) {
            var html = "<td>" + item.data + "</td>";
            $table.find('tbody tr').eq(i).append(html);
        });
        // update cache
        $table.trigger('updateAll');
    });
});

回答3:

Another option is to call the destroy method to completely remove the tablesorter functionality, including all widgets, associated data, and event handlers from the table.

$('#myTable').trigger('destroy');

Then add the respective markup for new columns in the table and simply call

$("#myTable").tablesorter()

as you normally would.

来源：https://stackoverflow.com/questions/4710785/adding-columns-dynamically-to-a-table-managed-with-jquerys-tablesorter

标签

jquery

tablesorter