DataTable中隱藏行

我需要幫助隱藏在數據表中的行，
DataTable中隱藏行

當用戶選擇「顯示所有」從下拉列表中，完整的數據表中應呈現，

否則當用戶選擇「隱藏美國」，
我想隱藏其國家/地區列的值爲「美國」的行。
所以需要某種類型的數據表的隱藏/顯示切換功能，具體取決於列的值。

這裏是我的示例代碼 -

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 

    <script src="https://code.jquery.com/jquery-1.12.3.js"></script> 
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css"> 

    <script type="text/javascript"> 
     $(document).ready(function() { 

      var table = $('#example').DataTable(); 

      $("#choice").on("change",function(){ 

       var _val = $(this).val(); 

       if(_val == 2){ 
         table 
         .columns(2) 
         .search('USA',true) 
         .draw(); 
        } 
        else{ 
        table 
        .columns() 
        .search('') 
        .draw(); 
        } 
      }); 
     }); 



    </script> 

    <style> 
     #choice{ 
      width: 135px; 
      height: 35px; 
      margin-bottom: 20px; 
     } 
    </style> 

</head> 

<body> 

    <select name="choice" id="choice"> 
     <option value="1">Show All</option> 
     <option value="2">Hide USA</option> 
    </select> 

    <table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Age</th> 
       <th>Country</th> 
      </tr> 
     </thead> 
     <tfoot> 
      <tr> 
       <th>Name</th> 
       <th>Age</th> 
       <th>Country</th> 
      </tr> 
     </tfoot> 
     <tbody> 
      <tr> 
       <td>Tiger Nixon</td> 
       <td>61</td> 
       <th>USA</th> 
      </tr> 
      <tr> 
       <td>Garrett Winters</td> 
       <td>63</td> 
       <th>USA</th> 
      </tr> 
      <tr> 
       <td>Ashton Cox</td> 
       <td>61</td> 
       <th>Mexico</th> 
      </tr> 
      <tr> 
       <td>Cedric Kelly</td> 
       <td>45</td> 
       <th>Brazil</th> 
      </tr> 
      <tr> 
       <td>Airi Satou</td> 
       <td>56</td> 
       <th>Japan</th> 
      </tr> 

     </tbody> 
    </table> 

</body> 
</html>

我當前的代碼是隱藏的「非美國」行，
而我想隱藏行，他的「國家」一欄中有「USA」

來源

2016-07-14 Aniruddha Raje

這讀起來像「給我的代碼！」題。你沒有真正展現你的嘗試。快速的谷歌搜索帶來了很多好的結果。 – dan08

對不起，我已經更新了我所嘗試的以及一些相關邏輯，很抱歉我無法分享我的實際項目代碼，這就是爲什麼最初的簡短問題。 –

您可以使用DataTable的search，並指定用正則表達式的值，例如：

隱藏非61歲

table 
    .columns(1) 
    .search('^(?:(?!61).)*$\r?\n?', true, false) 
    .draw();

顯示所有

table 
    .columns() 
    .search('') 
    .draw();

結果：https://jsfiddle.net/cmedina/egsqb68u/1/

UPDATE：

隱藏USA：

table 
    .columns(2) //The index of column to search 
    .search('^(?:(?!USA).)*$\r?\n?', true, false) //The RegExp search all string that not cointains USA 
    .draw();

結果：https://jsfiddle.net/cmedina/egsqb68u/2/

來源

2016-07-14 17:05:30 CMedina

你好，請你解釋一下這個搜索參數是什麼意思。「^（？:(？！61）。）* $ \ r？\ n？」？ –

此外，您傳遞給搜索的真實，錯誤參數是什麼意思？ –

@ AniruddhaRaje第一個參數是一個RegExp'^（？:(？！61）。）* $ \ r？\ n？'，它將不同的值過濾到'61'，下一個參數是正則表達式的指標，最後一個參數是智能指標，plase閱讀documentacion https://datatables.net/reference/api/search（）和正則表達式請參閱http://www.w3schools.com/jsref/jsref_obj_regexp.asp – CMedina

DataTable中隱藏行

回答

相關問題