描述(Description)
虽然
search()API
方法提供了在整个表中进行全局搜索的功能,但是此方法以及复数形式提供了搜索特定列上数据的功能。
因为可以使用多种不同的方式来搜索特定列数据,所以Datatables没有内置任何搜索控件,但是使用这种方法添加自定义列搜索控件变得非常容易。下面的例子显示了如何使用它。
Datatables具有称为“smart”搜索的内置搜索算法,旨在使搜索表数据变得容易,让最终用户操作起来更简单。“smart”搜索使用正则表达式执行,因此如果您使用正则表达式搜索,则必须考虑此方法的第二个参数。有关Datatables中“smart”搜索的完整说明,请参阅
search()API
文档。
请注意,Datatables中的这种搜索功能实际上是一种过滤器,它是减法操作。之所以称为搜索,以避免与过滤器辅助方法
filter()API
重名。
请注意,此方法只是在内部执行过滤,并没有把数据显示到表中。为了执行搜索并显示结果,还需用
draw()API
方法。使用链式操作,比如这样table.column( [0,1] ).search( 'Fred' ).draw();
,这是为了能够执行绘制之前将多个更改排入队列。
类型(Types)
function columns().search()
描述(Description):
获取当前列搜索应用的搜索词。
返回(Returns):
Datatables API 实例,结果集中包含被选择列应用的搜索词。
function columns().search( input [, regex[ , smart[ , caseInsen ]]] )
描述(Description):
在选择器匹配到的多个列设置列的搜索词。注意,这实际并不执行搜索,而是将其操作加入到队列中,使用
draw()API
执行搜索并显示结果。
参数(Parameters):
名称(Name) | 类型(Type) | 是否可选(Optional) | |
---|---|---|---|
1 | input |
stringType
|
No |
应用于多个列的搜索字符串 | |||
2 | regex |
booleanType
|
Yes - default:false |
视指定的字符串为正则表达式(true )或者不(默认,false )
|
|||
3 | smart |
booleanType
|
Yes - default:true |
执行智能搜索(默认 true )或不执行(false )。
请参考
search()API
获取“smart”过滤的完整说明。
请注意,执行“smart”搜索,Datatables使用正则表达式,因此,如果您将正则表达式作为第二个参数传递给此方法,您可能需要禁用智能搜索,以保证不同的正则表达是不会冲突。
|
|||
4 | caseInsen |
booleanType
|
Yes - default:true |
不区分大小写的匹配(默认,true )或者不(false )
|
返回(Returns):
Datatables API 实例
例子(Example)
将关键字应用到多个列:
var table = $('#example').DataTable();
table
.columns( '.status' )
.search( 'Important' )
.draw();
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th class="status">Status</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Status</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>Important</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>Normal</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>Important</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>Normal</td>
</tr>
</tbody>
</table>
给每一列构建一个搜索文本框,注意该例子执行部分单词匹配和“smart”搜索:
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $('#example thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').DataTable();
// Apply the filter
table.columns().every( function () {
var column = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
column
.search( this.value )
.draw();
} );
} );
给具有.select-filter
类名的列构建一个下拉搜索框:
var table = $('#example').DataTable();
table.columns( '.select-filter' ).every( function () {
var that = this;
// Create the select list and search operation
var select = $('<select />')
.appendTo(
this.footer()
)
.on( 'change', function () {
that
.search( $(this).val() )
.draw();
} );
// Get the search data for the first column and add to the select list
this
.cache( 'search' )
.sort()
.unique()
.each( function ( d ) {
select.append( $('<option value="'+d+'">'+d+'</option>') );
} );
} );
相关属性(Related)
下面的选项是直接相关的,也可能是您的应用程序的开发非常有用。
API
Options