数据表隐藏行答案

【问题标题】：Datatable Hide rows数据表隐藏行
【发布时间】：2016-07-15 23:05:45
【问题描述】：

我需要帮助来隐藏数据表中的行，

当用户从下拉列表中选择“全部显示”时，应该呈现完整的数据表，

否则当用户选择“隐藏美国”时，
我想隐藏 Country Column 值为“USA”的行。
因此，需要根据列的值对 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>

我当前的代码是隐藏“非美国”行，
而我想隐藏行，其“国家”列有“美国”

【问题讨论】：

这读起来像“给我代码！”问题。你还没有真正展示你尝试过的东西。快速的谷歌搜索带来了很多好的结果。
对不起，我已经更新了我尝试过的内容和一些相关的逻辑，很抱歉我无法分享我的实际项目代码，这就是最初的简短问题的原因。

标签： javascript jquery datatables

【解决方案1】：

您可以使用DataTable的search，并用正则表达式指定值，例如：

隐藏非 61 岁

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

全部显示

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

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

更新：

隐藏美国：

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/

【讨论】：

嗨，你能解释一下这个搜索参数是什么意思“^(?:(?!61).)*$\r?\n?” ?
你传递给搜索的真假参数是什么意思？
@AniruddhaRaje 第一个参数是RegExp ^(?:(?!61).)*$\r?\n?，过滤不同的值到61，下一个参数是正则表达式的指标，最后一个参数是智能指标，请阅读文档datatables.net/reference/api/search() 和正则表达式见w3schools.com/jsref/jsref_obj_regexp.asp
我已经更新了问题，我当前的代码是隐藏“非美国”行，而我想隐藏“国家”列有“美国”的行，你能帮帮我吗？
这个答案太棒了，它完成了我在 3 中的 30 行代码中要做的事情。我唯一的补充，适用于已经声明了他们的 dt 对象并且无法获取表函数的人要工作，请使用 table = $(' selector ').dataTable().api();在使用这些功能之前选择表格