如何使用 jQuery DataTables 过滤某些列答案

【问题标题】：How to use jQuery DataTables to filter certain columns如何使用 jQuery DataTables 过滤某些列
【发布时间】：2020-08-31 13:34:53
【问题描述】：

我正在使用Datatables plugin，它会自动允许对所有列进行列过滤。有没有办法让我在我的HTML tables 的第 2 到第 6 列上严格 filtering 我试图遵循这个 jQuery DataTables Filtering for Specific Columns Only 但它对我不起作用。

这是我的工作代码

<script> 
     $(document).ready(function() {
         // Setup - add a text input to each footer cell
         $('table thead tr').clone(true).appendTo( 'table thead' );
         $('table thead tr:eq(1) th').each( function (i) {
             if(i>=1 && i<=6)
             var title = $(this).text();
             $(this).html( '<input type="text" placeholder="Search '+title+'" />' );

             $( 'input', this ).on( 'keyup change', function () {
                 if ( table.column(i).search() !== this.value ) {
                     table
                         .column(i)
                         .search( this.value )
                         .draw();
                 }
             } );
         } );

         var table = $('table').DataTable( {
             fixedHeader: true,
             columnDefs: [
                   { targets: 0, visible: false},
                   { targets: '_all', visible: true },
                   ]
         } );

     } );


</script>

【问题讨论】：

标签： javascript html jquery datatables jquery-plugins

【解决方案1】：

试试这个链接！我认为您必须将 ids 的值传递给 js 文件，然后在 datatables 过滤器选项中使用这些 ids link

【讨论】：

【解决方案2】：

对表格中的每个 th 进行列过滤。如果您想删除过滤器，您可以应用以下解决方案之一。
1.您可以将不需要过滤器的列更改为 td
2. 向不需要过滤器的列添加一个类。此类将被添加到 th 因为过滤器应用于它们。我为这个例子添加了一个 sn-p。我在列中添加了我不想过滤（开始日期）类noFilter。对于那些我添加了一个跨度（你可以选择任何你想要的）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js"></script>

    <script>
        $(document).ready(function () {
            // Setup - add a text input to each footer cell
            $('#example thead tr').clone(true).appendTo('#example thead');
            $('#example thead tr:eq(1) th').each(function (i) {
                if (!$(this).hasClass("noFilter")) {
                    var title = $(this).text();
                    $(this).html('<input type="text" placeholder="Search ' + title + '" />');

                    $('input', this).on('keyup change', function () {
                        if (table.column(i).search() !== this.value) {
                            table
                                .column(i)
                                .search(this.value)
                                .draw();
                        }
                    });
                }
                else {
                    $(this).html('<span></span>');
                }

            });

            var table = $('#example').DataTable({
                orderCellsTop: true,
                fixedHeader: true,
                columnDefs: [
                    { targets: 0, visible: true }
                ]
            });
        });
    </script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.dataTables.min.css">
</head>
<body>
    <table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th class="noFilter">Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Yuri Berry</td>
                <td>Chief Marketing Officer (CMO)</td>
                <td>New York</td>
                <td>40</td>
                <td>2009/06/25</td>
                <td>$675,000</td>
            </tr>
            <tr>
                <td>Caesar Vance</td>
                <td>Pre-Sales Support</td>
                <td>New York</td>
                <td>21</td>
                <td>2011/12/12</td>
                <td>$106,450</td>
            </tr>
            <tr>
                <td>Suki Burks</td>
                <td>Developer</td>
                <td>London</td>
                <td>53</td>
                <td>2009/10/22</td>
                <td>$114,500</td>
            </tr>
            <tr>
                <td>Vivian Harrell</td>
                <td>Financial Controller</td>
                <td>San Francisco</td>
                <td>62</td>
                <td>2009/02/14</td>
                <td>$452,500</td>
            </tr>
            <tr>
                <td>Timothy Mooney</td>
                <td>Office Manager</td>
                <td>London</td>
                <td>37</td>
                <td>2008/12/11</td>
                <td>$136,200</td>
            </tr>
            <tr>
                <td>Jennifer Acosta</td>
                <td>Junior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>43</td>
                <td>2013/02/01</td>
                <td>$75,650</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>

【讨论】：