在DataTables.net中篩選包含下拉列表的列

我想知道是否可以通過DataTables.net篩選包含下拉列表的列。因此，例如：在DataTables.net中篩選包含下拉列表的列

<table id="example" class="display" cellspacing="0" width="100%"> 
<thead> 
    <tr> 
     <th>Name</th> 
     <th>Position</th> 
     <th>Office</th> 
     <th>Item requested</th> 
    </tr> 
</thead> 
<tfoot> 
    <tr> 
     <th>Name</th> 
     <th>Position</th> 
     <th>Office</th> 
     <th>Item requested</th> 
    </tr> 
</tfoot> 
<tbody> 
    <tr> 
     <td>Tiger Nixon</td> 
     <td>System Architect</td> 
     <td>Edinburgh</td> 
     <td> 
    <select id="ItemRequested" name="ItemRequested"> 
     <option value="FO">Foo</option> 
     <option value="BA">Bar</option> 
     <option selected="selected" value="WI">Widget</option> 
    </select> 
</td> 
    </tr> 
    <tr> 
     <td>Joe Bloggs</td> 
     <td>Software Engineer</td> 
     <td>London</td> 
     <td> 
    <select id="ItemRequested" name="ItemRequested"> 
     <option value="FO">Foo</option> 
     <option selected="selected" value="BA">Bar</option> 
     <option value="WI">Widget</option> 
    </select> 
</td> 
    </tr> 
</tbody>

我需要能夠搜索到爲每個下拉列表選擇的值。

任何幫助將不勝感激。

謝謝。

來源

2017-06-14 Diz19791

嘗試這樣：

<html> 
 
\t <head> 
 
\t \t <link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" /> 
 
\t \t 
 
\t \t <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script> 
 
\t \t <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 
\t \t 
 
\t \t <script type="text/javascript" language="javascript" class="init"> 
 
\t \t $(document).ready(function() { 
 
      var data = []; 
 
      data.push(
 
       [1,"Sasha","Brenna","0800 1111"], 
 
       [2,"Sage","Mia","(01012) 405872"], 
 
       [3,"Chelsea","Allistair","076 0578 0265"], 
 
       [4,"Uta","Savannah","070 1247 5884"], 
 
       [5,"Remedios","Berk","0995 181 0007"], 
 
       [6,"Ruby","Wayne","0800 1111"], 
 
       [7,"Faith","Fredericka","(01709) 099879"], 
 
       [8,"Myra","Harrison","070 4241 9576"], 
 
       [9,"Drake","Miriam","0800 733635"], 
 
       [10,"Reed","Shannon","076 8597 5067"] 
 
      ); 
 
      
 
      var count = 0; 
 
      $('#data_table').DataTable({ 
 
       data:   data, 
 
       
 
       initComplete: function(){ 
 
        this.api().columns().every(function() { 
 
         /*if(count == 2) 
 
         {*/ 
 
          var column = this; 
 
          var select = $('<select><option value=""></option></select>') 
 
           .appendTo($(column.footer()).empty()) 
 
           .on('change', function() { 
 
            var val = $.fn.dataTable.util.escapeRegex(
 
             $(this).val() 
 
            ); 
 
       
 
            column 
 
             .search(val ? '^'+val+'$' : '', true, false) 
 
             .draw(); 
 
           }); 
 
       
 
          column.data().unique().sort().each(function (d, j) { 
 
           select.append('<option value="'+d+'">'+d+'</option>') 
 
          }); 
 
         /*}*/ 
 
         count++; 
 
        }); 
 
       } 
 
      }); 
 
     }); 
 
\t \t </script> 
 
\t \t 
 
\t \t <style> 
 
\t \t .odd{ 
 
\t \t \t background-color: #FFF8FB !important; 
 
\t \t } 
 
\t \t .even{ 
 
\t \t \t background-color: #DDEBF8 !important; 
 
\t \t } 
 
\t \t </style> 
 
\t </head> 
 
\t <body> 
 
\t <div> 
 

 
\t <table id="data_table" width="100%"> 
 
\t \t <thead> 
 
\t \t \t <tr> 
 
\t \t \t \t <th>Emp Code</th> 
 
\t \t \t \t <th>First Name</th> 
 
\t \t \t \t <th>Last Name</th> 
 
\t \t \t \t <th>Mobile</th> 
 
\t \t \t </tr> 
 
\t \t </thead> 
 

 
\t \t <tbody> 
 
\t \t <!-- Dynamic Body --> 
 
\t \t </tbody> 
 

 
     <tfoot> 
 
      <tr> 
 
       <th></th> 
 
       <th></th> 
 
       <th></th> 
 
       <th></th> 
 
      </tr> 
 
     </tfoot> 
 
\t </table> 
 

 
\t </body> 
 
\t </div> 
 
</html>

這裏下拉選擇過濾器在頁腳實現。

來源

2017-06-14 07:07:27

Mayank，我不認爲提出的解決方案是迪茲想要的。作爲用戶，我希望能夠根據下拉列中的選定值過濾行。我想使用一個過濾器框來對所有列進行過濾。此外，更重要的一列將有選擇框，而不僅僅是文本。 – java1977

在DataTables.net中篩選包含下拉列表的列

回答

相關問題