使用npm 引入dataTable
引入datatables.net-dt
首先导入 npm
包
|
在需要引用的地方,导入 dataTable
|
参考
获取api的三种方法
$(selector). DataTable();
$(selector).dataTable().api();
$.fn.dataTable. Api( selector );
第三种方法比较特殊,我使用过一次,使用场景为:
无法引入 jquery
, dataTable
不能初始化,这主要是因为使用 npm
进行模块加载的时候,主代码已经有 jquery
,再引入 jquery
回覆盖之前 jquery
的插件,所以使用
|
这里使用 $(selector). DataTable();
、 $(selector).dataTable().api();
都无法返回Api; 所以使用如下方式
|
参考
搜索匹配正则的问题
DataTable
中的 search
搜索框功能非常强大,可以匹配表格中的任意数据。不仅如此 DataTable
还提供了 regex
选项可以使用正则表达式。
|
但是,如果你有更多的要求,比如:对一行的多个列进行匹配,那么你就需要了解dataTable的匹配规则
DataTable搜索结果以行显示,那么每一行是怎么匹配正则的?
每一行代表的字符串是以2个空格将没一列连成一个字符串
例如:
|example1|example2|example3|
|:-:|:-:|:-:|
|a|c|d|
|e|f|g|
|h|i|j|
如果我们在输入框中输入: ^a c d
即可匹配到第一行
如果想要更多的验证DataTable的正则匹配规则,可以点击连接验证
多列使用搜索
很多人想到用 .columns()
,但是 .columns()
表示的是与 &&
, 例如 .columns([1, 2]).search('')
表示的是第2,3列都有匹配的项
有一种替代方法,如下:
|
添加外部html
可以在 dom
选项中添加类名为 toolbar
的 div
,再往其中加入代码即可
|
参考
- 本文作者: luckyship
- 本文链接: https://luckyship.github.io/2020/11/21/2020-11-21-dataTable/
- 版权声明: 本博客所有文章除特别声明外,均采用 MIT 许可协议。转载请注明出处!