4

現在、bootstrap-multiselect プラグインを使用してテーブルのフィルタリングに取り組んでいます。私はそれを適切に機能させるのに苦労しています。複数選択で選択した値に応じてテーブルの行を表示/非表示にしたい。たとえば、行にActivatedの値がある場合、アクティブ化された値を持つ行のみが表示され、他の行は非表示になります。[Activated] と [Deactivated] を選択した場合、値が [ Activated ]と[Deactivated]の行が表示されます。All Selectedを選択した場合、すべての行が表示されます。ここで私のコードをチェックしました:

$('#custom-select').multiselect({
       includeSelectAllOption: true,
       onChange: function(option, checked) {

       var selected = [];

       $('#custom-select option:selected').each(function() {
           selected.push($(this).val());
       });

       console.log(selected);

       $.each(selected, function(i, val) {   

          $('#custom-table tr > td:not(:contains('+val+'))').closest('tr').hide();
          $('#custom-table tr > td:contains('+val+')').closest('tr').show();

       //console.log(val);
       });

       }
   });

jsfiddleに関する私の現在の作業。

4

1 に答える 1

4

tr各ループ内にテーブルの行を隠しています。そのため、ループが最後に実行されると、表示されるはずだった行が非表示になります。それをループから取り出し、実行する前にすべての行を非表示にしshowます。

$(document).ready(function() {

   $('#custom-select').multiselect({
       includeSelectAllOption: true,
       onChange: function(option, checked) {

           var selected = [];

           $('#custom-select option:selected').each(function() {
               selected.push($(this).val());
           });

           $('#custom-table tr').hide();  // <-----

           $.each(selected, function(i, val) {   
               $('#custom-table tr > td:contains('+val+')').closest('tr').show();
           });
       }
    });
});

jsフィドル

于 2015-07-16T06:25:46.997 に答える