Filtre externe avec texte de bouton personnalisé et multi-colonnes

Question

J'utilise Tablesorter et j'aimerais ajouter quelques boutons de raccourci pour mes utilisateurs afin de les aider à remplir les boîtes de filtres. Les boutons fonctionnent très bien si elle est utilisée comme décrit ici:

• https://mottie.github.io/tablesorter/docs/example-widget-filter-custom-search.html#how_to_add_custom_filter_types

et ici:

• https://mottie.github.io/tablesorter/docs/example-widget-filter-custom-search2.html

Je dois changer l'étiquette du bouton-à-dire filtrer quelque chose qui est différent de l'étiquette du bouton. Comment puis-je l'ajouter?

En outre: Comment activer le filtrage dans plusieurs colonnes lorsque plusieurs boutons sont enfoncés? En ce moment, tous les autres filtres sont effacés quand un bouton est pressé

Mon bouton de code jQuery pour l'utilisation des boutons externes ressemble à ceci:

$('button').click(function(){ 
     var $t = $(this), 
      col = $t.data('filter-column'), // zero-based index 
      filter = []; 

     filter[col] = $t.text(); // text to add to filter 
     $('#sorttable').trigger('search', [ filter ]); 
     return false; 
     }); 

Et je voudrais ajouter un filtre à l'aide

<button class="btn btn-sm btn-primary" data-filter-column="1">50 - 59</button> 
<button class="btn btn-sm btn-primary" data-filter-column="0">DIV</button> 

Le Texte "DIV" Je voudrais remplacer par quelque chose d'autre, tout en appliquant un filtre qui lit réellement "DIV" à la colonne 0, et en même temps je voudrais ne pas effacer le filtre "50 - 59" que le premier bouton aurait pu ajouter à la colonne 1.

Answer 1

Vous pouvez configurer le code pour obtenir une ou plusieurs requêtes d'un bouton (demo)

HTML

<button class="btn btn-sm btn-primary" data-filter-column="0,1" data-filter-query="abc,>50">Combo</button> 

Script

$(function() { 

    $('button').click(function() { 
    var i, 
     $t = $(this), 
     col = $t.attr('data-filter-column').split(/\s*,\s*/), // zero-based index 
     query = $t.attr('data-filter-query').split(/\s*,\s*/), 
     filter = []; 

    for (i = 0; i < col.length; i++) { 
     var n = parseInt(col[i], 10); 
     filter[n] = query[i]; // text to add to filter 
    } 
    $('#sorttable').trigger('search', [filter]); 
    return false; 
    }); 

    $('#sorttable').tablesorter({ 
    theme: 'blue', 
    widgets: ['zebra', 'filter'] 
    }); 
}); 

Ou, vous pouvez utiliser le haut- méthodes pour rechercher une plage de colonnes - voir this demo.

---

Mise à jour: Essayez this demo qui met à jour les filtres existants à chaque clic de bouton. Utilisez le bouton de réinitialisation pour tout effacer

$(function() { 

    var $table = $('#sorttable'); 

    $('button:not(.reset)').click(function() { 
    var i, 
     $t = $(this), 
     col = $t.data('filter-column'), // zero-based index 
     query = $t.attr('data-filter-query'), 
     // get the current filter values 
     filter = $.tablesorter.getFilters($table); 
    filter[col] = query; // text to add to filter 
    $table.trigger('search', [filter]); 
    return false; 
    }); 

    $table.tablesorter({ 
    theme: 'blue', 
    widgets: ['zebra', 'filter'], 
    widgetOptions: { 
     filter_reset: '.reset' 
    } 
    }); 
});