限制jQuery表过滤器

时间:2018-07-25 13:53:03

标签: jquery

早上好

我试图弄清楚如何在搜索表时避免对第一行进行搜索和排序。目前,输入文字后,它会过滤该字段。

感谢您的帮助!

http://jsfiddle.net/q0aL6vgm/2/

    var dtable = $('#filtersearch').DataTable();

    $('.filter').on('keyup change', function() {
      //clear global search values
      dtable.search('');
      dtable.column($(this).data('columnIndex')).search(this.value).draw();
    });

    $(".dataTables_filter input").on('keyup change', function() {
      //clear column search values
      dtable.columns().search('');
      //clear input values
      $('.filter').val('');
    });

已解决-刚刚添加了第二行标题... / facepalm

1 个答案:

答案 0 :(得分:0)

您需要在 thead 标签

中添加过滤器输入

使用以下内容更改HTML代码

<div class="row">
                    <div class="col-lg-12">
                        <div class="white-box">
                            <h3 class="box-title m-b-0">Column Toggle Table</h3>
                            <p class="text-muted m-b-20">The Column Toggle Table allows the user to select which columns they want to be visible.</p>
                            <table class="tablesaw table-striped table-hover table-bordered table" data-tablesaw-mode="columntoggle" id="filtersearch">
                                <thead>
                                    <tr>
                                        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="persist">Movie Title <br/></th>
                                        <th scope="col" data-tablesaw-sortable-col data-tablesaw-sortable-default-col data-tablesaw-priority="3">Rank <br/></th>
                                        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="2">Year <br/></th>
                                        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="1">
                                            <abbr title="Rotten Tomato Rating">Rating </abbr>
                                        </th>
                                        <th scope="col" data-tablesaw-sortable-col data-tablesaw-priority="4">Gross </th>
                                    </tr>
                                     <tr>
                                                                <td><input type='text' value='' class='filter' data-column-index='0'></td>
                                <td><input type='text' value='' class='filter' data-column-index='1'></td>
                                <td><input type='text' value='' class='filter' data-column-index='2'></td>
                                <td><input type='text' value='' class='filter' data-column-index='3'></td>
                                <td><input type='text' value='' class='filter' data-column-index='4'></td>
                                </tr>
                                </thead>
                                <tbody>

                                    <tr>
                                        <td class="title"><a href="javascript:void(0)">Avatar</a></td>
                                        <td>1</td>
                                        <td>2009</td>
                                        <td>83%</td>
                                        <td>$2.7B</td>
                                    </tr>
                                    <tr>
                                        <td class="title"><a href="javascript:void(0)">Titanic</a></td>
                                        <td>2</td>
                                        <td>1997</td>
                                        <td>88%</td>
                                        <td>$2.1B</td>
                                    </tr>
                                    <tr>
                                        <td class="title"><a href="javascript:void(0)">The Avengers</a></td>
                                        <td>3</td>
                                        <td>2012</td>
                                        <td>92%</td>
                                        <td>$1.5B</td>
                                    </tr>
                                    <tr>
                                        <td class="title"><a href="javascript:void(0)">Harry Potter and the Deathly Hallows—Part 2</a></td>
                                        <td>4</td>
                                        <td>2011</td>
                                        <td>96%</td>
                                        <td>$1.3B</td>
                                    </tr>
                                    <tr>
                                        <td class="title"><a href="javascript:void(0)">Frozen</a></td>
                                        <td>5</td>
                                        <td>2013</td>
                                        <td>89%</td>
                                        <td>$1.2B</td>
                                    </tr>
                                    <tr>
                                        <td class="title"><a href="javascript:void(0)">Iron Man 3</a></td>
                                        <td>6</td>
                                        <td>2013</td>
                                        <td>78%</td>
                                        <td>$1.2B</td>
                                    </tr>
                                    <tr>
                                        <td class="title"><a href="javascript:void(0)">Transformers: Dark of the Moon</a></td>
                                        <td>7</td>
                                        <td>2011</td>
                                        <td>36%</td>
                                        <td>$1.1B</td>
                                    </tr>
                                    <tr>
                                        <td class="title"><a href="javascript:void(0)">The Lord of the Rings: The Return of the King</a></td>
                                        <td>8</td>
                                        <td>2003</td>
                                        <td>95%</td>
                                        <td>$1.1B</td>
                                    </tr>
                                    <tr>
                                        <td class="title"><a href="javascript:void(0)">Skyfall</a></td>
                                        <td>9</td>
                                        <td>2012</td>
                                        <td>92%</td>
                                        <td>$1.1B</td>
                                    </tr>
                                    <tr>
                                        <td class="title"><a href="javascript:void(0)">Transformers: Age of Extinction</a></td>
                                        <td>10</td>
                                        <td>2014</td>
                                        <td>18%</td>
                                        <td>$1.0B</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!-- /.row -->

            </div>