Hinzufügen von Spalten dynamisch in eine Tabelle verwaltet, die mit jQuery tablesorter

Auf einer web-Seite, die eine Tabelle, die sortiert durch die jQuery-tablesorter gibt es Funktionen zum hinzufügen von Spalten, um die Tabelle dynamisch. Wenn dies geschieht, ich nenne trigger("update") und trigger("appendCache") zu bekommen, tablesorter, um in der Lage sein, zu Sortieren, indem die neue Spalte (ich habe auch versucht, Sie anzurufen, tablesorter() wieder). Aber die widgets für die Sortierung nicht angezeigt werden in die neue Spalte(N), bis ich Sie in der header-Zellen.

Meine Frage ist, weiß jemand, wie man die widgets sofort angezeigt wird?
Dank
Grüße
Jason

InformationsquelleAutor Jason | 2011-01-17
  1. 2
       <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('[email protected]').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>[email protected]</td>
        <td>$50.00</td>
        <td>http://www.jsmith.com</td>
    </tr>
    <tr>
        <td>Bach</td>
        <td>Frank</td>
        <td>[email protected]</td>
        <td>$50.00</td>
        <td>http://www.frank.com</td>
    </tr>
    <tr>
        <td>Doe</td>
        <td>Jason</td>
        <td>[email protected]</td>
        <td>$100.00</td>
        <td>http://www.jdoe.com</td>
    </tr>
    <tr>
        <td>Conway</td>
        <td>Tim</td>
        <td>[email protected]</td>
        <td>$50.00</td>
        <td>http://www.timconway.com</td>
    </tr>
    </tbody>
    </table>
    </div>
    <input type="button" onclick="append()" value="append"/>
</body>

    Im Fall von Anhängen, das würde funktionieren. im Falle von löschen, versuchen, die gleiche aber ich bin nie sicher, ob

    • Ich bekomme es. Sie im Grunde in der Tabelle entfernen, nehmen Sie die änderungen, dann wieder anzufügen. Ich versuchte es und es funktionierte. Danke.
    • Sie sind herzlich eingeladen .. aber Sie sollten lassen Sie andere wissen, durch die Annahme der Antwort.
    InformationsquelleAutor Santosh Linkha
  2. 0

    Laut diese GitHub-Funktion:

    Können Sie jetzt mit der updateAll Methode zum aktualisieren der cache-Tabelle nach dem hinzufügen einer neuen Spalte mit Daten. Hier ist ein 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');
    });
});
    InformationsquelleAutor Matthew Steven Monkan
  3. 0

    Andere Möglichkeit ist der Aufruf der destroy Methode, um vollständig zu entfernen Sie die tablesorter Funktionalität, einschließlich aller widgets, die zugehörigen Daten, und event-Handler aus der Tabelle.

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

    Dann fügen Sie die entsprechenden markup für die neuen Spalten in die Tabelle und rufen Sie einfach

    $("#myTable").tablesorter()

    als Sie normalerweise würde.

    InformationsquelleAutor Matthew Steven Monkan
Schreibe einen Kommentar