Question

我需要帮助来隐藏来自Datatable的行，

当用户从下拉菜单中选择＆＃34;全部显示＆＃34; 时，应呈现完整的数据表，

其他当用户选择＆＃34;隐藏美国＆＃34; ，
我想隐藏其国家/地区列的值为＆＃34; USA＆＃34; 的行。
因此需要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>

我目前的代码是隐藏＆＃34;非美国＆＃34;行，
而我想隐藏行，其中＆＃34;国家＆＃34;专栏有＆＃34;美国＆＃34;

Answer 1

您可以使用DataTable的search，并使用regex指定值，例如：

隐藏非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/

数据表隐藏行

1 个答案: