jQuery tablesorter - perdita di funzionalità dopo la chiamata AJAX

Question

Ho recentemente sperimentato il plugin per i tablesorter per jQuery. L'ho installato e avviato con successo una sola volta e sono rimasto molto colpito. Tuttavia, ho provato ad applicare il tablesorter a una tabella diversa, solo per incontrare alcune difficoltà ...

Fondamentalmente la tabella che causa un problema ha uno <ul> sopra che funge da un insieme di schede per la tabella. quindi se si fa clic su una di queste schede, viene effettuata una chiamata AJAX e la tabella viene ripopolata con le righe pertinenti alla scheda specifica su cui si fa clic. Quando la pagina viene caricata inizialmente (ovvero prima che sia stata fatta clic su una scheda), la funzionalità del tablesorter funziona esattamente come previsto.

Ma quando si fa clic su una scheda e si ripopola la tabella, la funzionalità scompare, rendendola senza la funzionalità ordinabile. Anche se si torna alla scheda originale, dopo averne fatto clic su un'altra, la funzionalità non viene ripristinata - l'unico modo per farlo è un aggiornamento fisico della pagina nel browser.

Ho visto una soluzione che sembra simile al mio problema su questo sito, e qualcuno consiglia di utilizzare il plugin jQuery, livequery. Ho provato questo ma senza successo :-(

Se qualcuno ha qualche suggerimento sarei molto riconoscente. Posso pubblicare frammenti di codice se sarebbe d'aiuto (anche se so che il codice di istanza per tablesorter va bene come si lavora su tavoli senza schede - quindi non è sicuramente quello)

EDIT:! Come richiesto, ecco alcuni frammenti di codice:
la tabella da ordinare è <table id="#sortableTable#">..</table>, il codice di istanza per tablesorter che sto usando è:

$(document).ready(function() 
{ 
    $("#sortableTable").tablesorter(
    { 
     headers: //disable any headers not worthy of sorting! 
     { 
      0: { sorter: false }, 
      5: { sorter: false } 
     }, 
     sortMultiSortKey: 'ctrlKey', 
     debug:true, 
     widgets: ['zebra'] 
    }); 
}); 

E ho cercato di mettere su livequery come segue:

$("#sortableTable").livequery(function(){ 
    $(this).tablesorter(); 
}); 

Questo non ha aiutato anche se ... non sono sicuro se dovrei utilizzare l'ID del tavolo con livequery in quanto è il click sul <ul> Dovrei rispondere, il che ovviamente non fa parte del tavolo stesso. Ho provato un certo numero di variazioni nella speranza che uno di loro aiuterà, ma senza successo :-(

Answer 1

Hai provato a chiamare

$("#myTable").tablesorter(); 

dopo il codice in cui si gestisce il clic sulla scheda e ripopolare la tabella ??? Se no, basta fare un tentativo.

Answer 2

può essere che come seconda tabella viene creata con l'Ajax che è necessario associare nuovamente gli eventi. si consiglia di utilizzare il plugin LiveQuery

http://docs.jquery.com/Plugins/livequery

che potrebbe "auto-magicamente" aiutare con il tuo problema.

modifica: scusa, rileggi il tuo post e hai visto che ci hai già provato.

---

Aggiornamento . Ho montato una bardatura di prova rapida che speriamo possa essere d'aiuto. Ci sono 3 LI in alto ognuno ha un modo diverso di aggiornare il contenuto della tabella.L'ultimo aggiorna i contenuti e mantiene l'ordine

<script src="jquery-1.3.js" type="text/javascript" ></script> 
    <script src="jquery.livequery.js" type="text/javascript" ></script> 
    <script src="jquery.tablesorter.min.js" type="text/javascript" ></script> 

<script> 

var newTableContents = "<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></tbody>"; 


$(document).ready(function() 
    { 
     $("#addData").click(function(event){ 
     $("#sortableTable").html(newTableContents); 
    }); 

    $("#addLivequery").livequery("click", function(event){ 
     $("#sortableTable").html(newTableContents); 
    }); 

    $("#addLiveTable").livequery("click", function(event){ 
     $("#sortableTable").html(newTableContents); 
     $("#sortableTable").tablesorter({ }); 
    }); 

    $("#sortableTable").tablesorter({ }); 
    }); 
</script> 

     <ul> 
      <li id="addData" style="background-color:#ffcc99;display:inline;">Update Table</li> 
      <li id="addLivequery" style="background-color:#99ccff;display:inline;">Update Table with livequery</li> 
      <li id="addLiveTable" style="background-color:#99cc99;display:inline;">Update Table with livequery & tablesorter</li> 
     </ul> 

     <hr /> 
     <table id="sortableTable"> 
     <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>Jones</td> 
      <td>Joe</td> 
      <td>jjones@gmail.com</td> 
      <td>$100.00</td> 
      <td>http://www.jjones.com</td> 
     </tr> 
     <tr> 
      <td>French</td> 
      <td>Guy</td> 
      <td>gf@yahoo.com</td> 
      <td>$50.00</td> 
      <td>http://www.french.com</td> 
     </tr> 
     </tbody> 
     </table> 

Answer 3

venuto fuori ho dovuto fare alcune modifiche al codice relativo AJAX per ri-chiamare $("#myTable").tablesorter(..) dopo aver estratto tutti i dati ...

Answer 4

stavo avendo il lo stesso problema tranne che stavo caricando una tabella che aveva una riga per ogni 'categoria', quindi inserendo i dati per ogni categoria nella tabella utilizzando le chiamate asincrone. Chiamando $("#myTable").tablesorter(..) dopo che ogni record è stato restituito, il mio browser ha bombardato quando è stato caricato più di un numero banale di record.

La mia soluzione era dichiarare due variabili, totalRecords e fetchedRecords. Nel $(document).ready() ho impostato il totalRecords per $("#recordRows").length; e ogni volta che popolare un record nella tabella, la variabile fetchedRecords viene incrementato e se fetchedRecords >= totalRecords Poi chiamo $("#myTable").tableSorter(..).

funziona abbastanza bene per me. Certamente, il tuo chilometraggio può variare.

Answer 5

Una volta che avete aggiunto i dati, fare questo:

$("your-table").trigger("update"); 
var sorting = [[0,0]]; 
$("your-table").trigger("sorton",[sorting]); 

Questo vi permetterà di conoscere il plugin che ha avuto un aggiornamento, e ri-ordinarla.

L'esempio completo data nel documento:

$(document).ready(function() { 
    $("table").tablesorter(); 
    $("#ajax-append").click(function() { 
     $.get("assets/ajax-content.html", function(html) { 
      // append the "ajax'd" data to the table body 
      $("table tbody").append(html); 
      // let the plugin know that we made a update 
      $("table").trigger("update"); 
      // set sorting column and direction, this will sort on the first and third column 
      var sorting = [[2,1],[0,0]]; 
      // sort on the first column 
      $("table").trigger("sorton",[sorting]); 
     }); 
     return false; 
    }); 
}); 

Dal doc tablesorter qui: http://tablesorter.com/docs/example-ajax.html

Answer 6

Utilizzare la funzione ajaxStop e il codice verrà eseguito dopo la chiamata AJAX è completa.

$("#DivBeingUpdated").ajaxStop(function(){ 
    $("table").tablesorter() 
}); 

Answer 7

dopo chiamata AJAX, quando ha cambiato il vostro contenuto HTML è necessario aggiornare tablesorter.

Prova questo per me che lavoro OK

se aggiungendo html

$("table tbody").append(html); 
     // let the plugin know that we made a update 
     $("table").trigger("update"); 
     // set sorting column and direction, this will sort on the first and third column 
     var sorting = [[2,1],[0,0]]; 
     // sort on the first column 
     $("table").trigger("sorton",[sorting]); 

e quando si aggiunge nuovo HTML invece più vecchio

$("table").trigger("update"); 
$("table").trigger("sorton"); 

Answer 8

Sono venuto di fronte a questo problema di recente. la soluzione di elwyn non ha funzionato per me. Ma this topic ha suggerito che il problema è nella sincronizzazione delle funzioni sugli eventi "update" e "sorton".

Se si guarda nel codice di jQuery tablesorter 2.0 (ver 2.0.5b.) Il codice sorgente, vedrete qualcosa di simile:

$this.bind("update", function() { 
    var me = this; 
    setTimeout(function() { 
     // rebuild parsers. 
     me.config.parsers = buildParserCache(me, $headers); 
     // rebuild the cache map 
     cache = buildCache(me); 
    }, 1); 
}).bind("sorton", function (e, list) { 
    $(this).trigger("sortStart"); 
    config.sortList = list; 
    // update and store the sortlist 
    var sortList = config.sortList; 
    // update header count index 
    updateHeaderSortCount(this, sortList); 
    // set css for headers 
    setHeadersCss(this, $headers, sortList, sortCSS); 
    // sort the table and append it to the dom 
    appendToTable(this, multisort(this, sortList, cache)); 
}); 

Quindi il problema è che setTimeout rende meno probabile che l'aggiornamento sarà finito prima di ordinare.La mia soluzione era quella di implementare un altro evento "updateSort", in modo che il codice di cui sopra sarebbe diventata:

var updateFunc = function (me) { 
    me.config.parsers = buildParserCache(me, $headers); 
    cache = buildCache(me); 
}; 
var sortFunc = function (me, e, list) { 
    $(me).trigger("sortStart"); 
    config.sortList = list; 
    var sortList = config.sortList; 
    updateHeaderSortCount(me, sortList); 
    setHeadersCss(me, $headers, sortList, sortCSS); 
    appendToTable(me, multisort(me, sortList, cache)); 
}; 
$this.bind("update", function() { 
    var me = this; 
    setTimeout(updateFunc(me), 1); 
}).bind("sorton", function(e, list) { 
    var me = this; 
    sortFunc(me, e, list); 
}).bind("updateSort", function (e, list) { 
    var me = this; 
    updateFunc(me); 
    sortFunc(me, e, list); 
}); 

Dopo aver aggiornato i dati della tabella si dovrà attivare solo questo nuovo evento:

var sorting = [[0,0]]; 
$("#your-table").trigger("updateSort",[sorting]);