淘先锋技术网

首页 1 2 3 4 5 6 7

在使用jQuery DataTable插件制作数据表格的时候,往往需要添加查询条件来筛选出所需要的数据。在DataTable中添加查询条件非常简单,只需要在table元素上添加class为data-table的类,并在初始化DataTable的时候添加搜索框即可。

<table class="data-table">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>入职时间</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>24</td>
<td>男</td>
<td>2020-01-01</td>
</tr>
<tr>
<td>李四</td>
<td>28</td>
<td>男</td>
<td>2019-06-01</td>
</tr>
<tr>
<td>王五</td>
<td>22</td>
<td>女</td>
<td>2020-08-01</td>
</tr>
</tbody>
</table>
<script>
$('.data-table').DataTable({
searching: true, // 是否开启搜索
searchDelay: 500, // 搜索延迟时间
});
</script>

在上面的代码中,我们添加了class为data-table的类,表示这是一个数据表格,并在初始化DataTable的时候设置了searching为true,表示开启搜索功能,searchDelay为500ms,表示搜索延迟时间为0.5秒。

除了这些常用的选项之外,DataTable还有很多其他的查询条件设置,例如设置搜索占位符placeholder,设置搜索的列searchCols,设置搜索正则表达式regex,设置搜索事件searchCallback等。根据不同的需求,可以自由设置查询条件。

<script>
$('.data-table').DataTable({
searching: true,
searchDelay: 500,
language: {
searchPlaceholder: '请输入搜索内容',
},
searchCols: [
null,
{ search: 'male' },
{ search: '2020' },
null,
],
searchRegex: true,
searchCallback: function(){
console.log('搜索事件触发');
}
});
</script>

在上面的代码中,我们通过language选项设置了搜索框的占位符为“请输入搜索内容”,通过searchCols设置了第二列搜索关键字为“male”,第三列搜索关键字为“2020”,通过searchRegex设置了搜索开启正则表达式搜索,通过searchCallback设置了搜索事件回调函数。

总之,在使用jQuery DataTable插件制作数据表格时,设置查询条件非常简单,只需要按照自己的需求,选择相应的查询条件即可。