在使用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插件制作数据表格时,设置查询条件非常简单,只需要按照自己的需求,选择相应的查询条件即可。