2011-01-17 4 views
3

Auf einer Webseite mit einer Tabelle, die nach dem jQuery-Tabellensorter sortiert wird, gibt es Funktionen zum dynamischen Hinzufügen von Spalten zur Tabelle. Wenn dies passiert, rufe ich trigger ("update") und trigger ("appendCache") an, damit satterorter nach der neuen Spalte sortieren kann (ich habe auch versucht, setsorter() erneut aufzurufen). Die Widgets zum Sortieren erscheinen jedoch nicht in den neuen Spalten, bis ich in die Header-Zellen klicke.Hinzufügen von Spalten dynamisch zu einer Tabelle, die mit dem jQuery-Tabellensorter verwaltet wird

Meine Frage ist, weiß jemand, wie die Widgets sofort angezeigt werden? Dank Grüße Jason

Antwort

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> 

Bei append dies funktionieren würde. im Falle des Löschens versuchen Sie das selbe, aber ich bin nie sicher

+0

ich bekomme es. Sie entfernen die Tabelle im Grunde, nehmen die Änderungen vor und fügen sie dann wieder ein. Ich habe es versucht und es hat funktioniert. Vielen Dank. – Jason

+0

Sie sind willkommen .. aber Sie sollten andere wissen lassen, indem Sie die Antwort akzeptieren. –