早上好
我试图弄清楚如何在搜索表时避免对第一行进行搜索和排序。目前,输入文字后,它会过滤该字段。
感谢您的帮助!
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
答案 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>