如何使用jQuery DataTables过滤某些列数

问题描述 投票：0回答：1

我正在使用 数据表插件 并且它自动允许对所有列进行列过滤。有没有办法让我严格 filtering 在我的第2列到第6列的栏目上。HTML tables 我试着按照这个 jQuery DataTables仅对特定列进行过滤。 但它不适合我。

这是我的工作代码

<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个回答
0
投票

试试这个链接 我认为你必须将id的值传递到js文件，然后在datatables过滤器选项中使用这些id。联系

0
投票

栏目过滤发生在每个 钍 如果你想删除过滤器，你可以应用以下解决方案之一。1. 您可以 改名换姓 对于您不需要过滤的列 2. 增加一个类 到不需要过滤器的列。这个类将被添加到th，因为过滤器被应用到它们身上。我为这个例子添加了一个片段。我在不需要过滤的列(Start Date)中添加了以下类 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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.