jquery dataTables 排序,筛选

Posted on 一 26 12月 2016 in front

jquery dataTables是一个非常棒的插件。默认实现了很多实用的功能。但是可能默认的效果不是我所想要的。下面是一些配置记录

搜索框放在左边

使用dataTables的dom选项

"dom":'<"pull-left"f>t<"pull-left"p>'
# pull-left 是一个class,
# f 是filtering input,也就是搜索框
# p 是pagination,也就是分页
# f 和 p 都放在一个div里,两个div都有了个pull-input的class
# t 是table
手动筛选结果。现在我有一个需求是有多个checkbox, 点击每一个checkbox,就筛选出不同结果
order_table.column(5).search(regs, true, false).order().draw();
# column(5) 表示根据第6页来搜索
# search()可以加很多参数,第一个参数是关键字,或者正则表达式,第二个为true,表示用正则搜索
# order()是排序的,draw()把结果显示在界面上
# filter目前还没有找到类似的方法
指定某列可以排序, 某列不排序
"ordering":true,
# 这是一个全局的开关

"columnDefs": [
    {"type": "num", "targets": 0}, {"orderable": false, "targets": 1}, {"orderable": false, "targets": 2},
    {"orderable": false, "targets": 3}, {"orderable": true, "targets": 4}, {"orderable": true, "targets": 5},
    {"orderable": false, "targets": 6}]
# type为num,表示在排序时使用num,因为如果数据是server render的,默认是以string来排序。这样排序会有问题
# orderable表示这一列是否可以排序
# targets 是列编号

参考链接:
https://datatables.net/examples/basic_init/dom.html
https://datatables.net/reference/option/order
https://datatables.net/examples/plug-ins/sorting_auto.html
https://datatables.net/reference/option/columns.orderable
https://datatables.net/reference/option/columns.type
https://datatables.net/examples/basic_init/table_sorting.html