tablesorter pas l'initialisation après Ajax remplace HTML

Question

J'utilise le addon jQuery tablesorter de Mottie: https://mottie.github.io/tablesorter/docs/

J'utilise le plugin téléavertisseur avec le traitement côté serveur, et je construis le code HTML sur le serveur et l'envoi retour avec le résultat JSON pour la fonction ajaxProcessing du plugin pager. Mon tableau HTML est chargé correctement, mais Tablesorter ne fait pas sa magie (en ajoutant le colgroup pour les colonnes joliment espacées, et en mettant à jour THEAD pour rendre les colonnes triables et pour activer les listes de filtres ajoutées avec mon HTML.)

Voici un petit bout du HTML Je commence par:

<table class="tableMain" id="scenarioTable"> 
    <thead> 
     <tr class="tableRowHeader"> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> 
       <div class="loadingCircle"></div> 
      </td> 
     </tr> 
    </tbody> 
</table> 

(la classe "loadingCircle" est juste une animation de l'espace réservé CSS; "tableMain" et "tableRowHeader" sont des classes de style définies ailleurs)

.

Voici mon Jav ascript:

$(function() { 
    $("#scenarioTable").tablesorter({ 
     cancelSelection: true, 
     debug: true, 
     emptyTo: "zero", 
     serverSideSorting: true, 
     showProcessing: true, 
     sortReset: true, 
     theme: "custom", 
     widthFixed: true, 
     widgets: ["filter", "zebra"], 
     widgetOptions: 
      { 
       filter_childRows: false, 
       filter_columnFilters: true, 
       filter_formatter: null, 
       filter_hideFilters: false, 
       filter_reset: '.clearFilters', 
       filter_serversideFiltering: true 
      } 
    }) 
    .tablesorterPager({ 
     container: $(".scenarioPager"), 
     ajaxObject: { 
      type: 'POST', 
      dataType: 'json', 
      data: { scenarioID: 1000 }, 
      success : function(){ $("#scenarioTable").trigger("update"); } 
     }, 
     ajaxProcessing: function(result, table, xhr){ 
      if (result && result.hasOwnProperty('mScenarioTableHTML')) { 
       var toReturn = { 
        total : result["mTotalRows"], 
        filteredRows : result["mTotalFilteredRows"] 
       } 
       $(table).html(result["mScenarioTableHTML"]); 
       return toReturn; 
      } 
     }, 
     ajaxUrl: "my URL goes here", 
     page: 0, 
     pageReset: 0, 
     processAjaxOnInit: true, 
     size: 1000, 
    }); 
}); 

Ainsi, lorsque la page se charge, tablesorter met à jour la table HTML à cela, comme prévu:

<table class="tableMain tablesorter tablesorter-custom tablesorter749b92e50ae53 hasFilters tablesorter-processing" id="scenarioTable" role="grid" aria-describedby="scenarioTable_pager_info"> 
    <colgroup class="tablesorter-colgroup"><col style="width: 100%;"></colgroup> 
    <thead> 
     <tr class="tableRowHeader" role="row"> 
     </tr> 
    </thead> 
    <tbody aria-live="polite" aria-relevant="all"></tbody> 
</table> 

Ensuite, ma fonction ajaxProcessing remplace le COLGROUP, THEAD et balises TBODY avec le code HTML I envoyer du serveur et le HTML finit par ressembler à ceci:

<table class="tableMain tablesorter tablesorter-custom tablesorter792090cf9b53c hasFilters" id="scenarioTable" role="grid" aria-describedby="scenarioTable_pager_info"> 
    <thead> 
     <tr class="tableRowHeader"> 
      <th class="filter-select"> 
       Trial # 
      </th> 
      <th class="filter-select"> 
       Time (sec) 
      </th> 
     </tr> 
     <tr> 
      <td> 
       <select name="trial" id="trial"> 
        <option value="" selected="selected"> </option> 
        <option value="1">1</option> 
        <option value="2">2</option> 
       </select> 
      </td> 
      <td> 
       <select name="time" id="time"> 
        <option value="" selected="selected"> </option> 
        <option value="10.5">10.5</option> 
        <option value="13.4">13.4</option> 
       </select> 
      </td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr class="odd"> 
      <td id="101" class="notFlagged"> 
       1 
      </td> 
      <td id="102" class="flagged"> 
       13.4 
      </td> 
     </tr> 
     <tr class="even"> 
      <td id="103" class="notFlagged"> 
       2 
      </td> 
      <td id="104" class="notFlagged"> 
       10.5 
      </td> 
     </tr> 
    </tbody> 
</table> 

Alors tablesorter ajoute que les « étranges » et « même » classes pour les balises TR pour zébrures, et rien d'autre . Le reste du HTML est exactement ce que j'envoie du serveur.

est-il un moyen d'avoir tablesorter mettre à jour le code HTML que je charge, ou ne tablesorter doit construire lui-même le code HTML pour ajouter dans les choses de tri et de filtrage?

Answer 1

La fonction téléavertisseur ajaxProcessing ne doit pas remplacer la table entière. Si vous souhaitez mettre à jour l'en-tête, il est préférable d'inclure le même nombre de colonnes (regardez le code HTML de this demo). retour au lieu d'une valeur headers de la fonction ajaxProcessing comme décrit dans the documentation pour retourner un objet.

Si doit mettre à jour la totalité du tableau, n'utilisez pas la fonction ajaxProcessing. Au lieu de se lier aux événements pager, puis:

• Detroy l'instance de tablesorter actuelle, et le réinitialiser après la fin du pager.
• Ou, utilisez updateAll pour mettre à jour le contenu thead et tbody de tablesorter. Ceci n'est pas recommandé car il est toujours problématique et peut entraîner une fuite de mémoire.