のDataTableを隠す行

、ユーザーがドロップダウンから「すべて表示」を選択すると、完全なデータテーブルがレンダリングされるべき

、DATATABLEから行を非表示にするには助けが必要そうでない場合ユーザーは「米国を隠す」を選択します、
は国の列の値が「USA」の行を非表示にします。
したがって、列の値に応じて、Datatableのhide/showトグル機能が必要です。

ここに私のサンプルコードです -

<!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" の行を非表示に
私は、行を非表示にする一方で、その "国" の欄には "USA"

を持っているが、

出典

2016-07-14 Aniruddha Raje

これは次のように読み、 "私を与えるコード！"質問。あなたはあなたが試したことを本当に示さなかった。そして、すばやくGoogle検索を行うと、多くの良い結果が得られます。 – 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最初のパラメータは、異なる値を '61'にフィルタリングするRegExp' ^（？:(?! 61））* $ \ r？\ n？ 'で、次のパラメータは正規表現のための指標であり、最後のパラメータはスマートなインジケータです、plaseはdocumentacion https://datatables.net/reference/api/search（）を読み、正規表現はhttp://www.w3schools.com/jsref/jsref_obj_regexp.aspを参照してください。 – CMedina

答えて

関連する問題