TableFilter Plugin avec des données nulles

Question

J'utilise "jquery.tablesorter.widgets.js" pour le filtre de table fonctionne très bien, mais je dois afficher "Aucune donnée trouvée" lorsque les enregistrements ne sont pas disponibles en fonction des critères de recherche.

Voici mon code.

Code HTML:

  <tr> 
       <td class="filter-false" width="3%" style="background: #5e5c5c; color: #fff; vertical-align: middle; font-size: 12px; font-weight: bold"></td> 
       <th class="txt1" style="text-decoration: underline; cursor: pointer">Domain</th> 
       <th style="text-decoration: underline; cursor: pointer">Registrant Name</th> 
       <th class="filter-select" data-placeholder="Select" style="text-decoration: underline; cursor: pointer">Account Id</th> 
       <th style="text-decoration: underline; cursor: pointer">Expiry Date</th> 
       <th style="text-decoration: underline; cursor: pointer">Renewal Date</th> 
       <th style="text-decoration: underline; cursor: pointer">Email ID</th> 
       <th class="filter-false" style="text-decoration: underline; cursor: pointer">Status</th> 
      </tr> 

code Javascript:

   $(document).ready(function() { 

    $("#yui").tablesorter({ 

     // headers: { 0: { sorter: false }, 1: { sorter: false }, 2: { sorter: false }, 3: { sorter: false }, 4: { sorter: false }, 5: { sorter: false } }, 
     widthFixed: false, 

     // initialize zebra striping and filter widgets 
     widgets: ["zebra", "filter"], 

     // headers: { 5: { sorter: false, filter: false } }, 

     widgetOptions: { 

      // extra css class applied to the table row containing the filters & the inputs within that row 
      filter_cssFilter: '', 

      // visible; default is false 
      filter_childRows: false, 

      filter_ignoreCase: true, 

      filter_reset: '.reset', 

      filter_saveFilters: true, 

      filter_searchDelay: 300, 

      filter_startsWith: false, 

      filter_hideFilters: false, 

      filter_functions: { 

      } 
     } 
    }) 
    .tablesorterPager({ container: $("#pagerOne"), positionFixed: false, size: 10 }) 
}); 

Je dois afficher "Aucune donnée trouvée" comme ligne de la table.

Answer 1

Vous pouvez utiliser le haut-showError function (v2.15 +) et se lier à quelques événements comme suit (demo):

$(function() { 

    $("#yui") 
    .on('filterEnd filterReset pagerComplete', function(e, table){ 
     var fr, table = this; 
     if (table.config.pager) { 
      $.tablesorter.showError(table); 
      fr = table.config.pager.filteredRows; 
      if (fr === 0) { 
       $.tablesorter.showError(table, "No Data Found"); 
      } 
     } 
    }) 
    .tablesorter({ 
     theme: 'blue', 
     widthFixed: false, 
     widgets: ["zebra", "filter"], 
     widgetOptions: { 
      filter_cssFilter: '', 
      filter_childRows: false, 
      filter_ignoreCase: true, 
      filter_reset: '.reset', 
      filter_saveFilters: true, 
      filter_searchDelay: 300, 
      filter_startsWith: false, 
      filter_hideFilters: false, 
      filter_functions: {} 
     } 
    }) 
    .tablesorterPager({ 
     container: $(".pager"), 
     positionFixed: false, 
     size: 10 
    }); 

}); 

Remarque, les besoins de liaison événement se produise avant que le pager est initialisé & Le paramètre setTimeout court est également requis car le compteur filteredRows pager n'est pas mis à jour immédiatement après l'événement filterEnd.

J'ai besoin de fixer le pagerChange event pour assurer qu'il se déclenche après chaque changement de téléavertisseur, pas seulement un changement « page », donc vous suffit alors de se lier à un événement qui n'a pas besoin d'un délai

Mise à jour: Code modifié pour utiliser le pagerComplete event, donc pas besoin d'un setTimeout.