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中隐藏行

回答

相关问题