创建一个和平常一样的table实例，并且再创建一个tableFilter实例，挂载到table即可完成 本地过滤不建议开启分页和排序
和local本地过滤类似。只是将过滤逻辑交给服务端再返回给前端，刷新表格后显示结果数据
因为是本地JSON数据演示，返回数据不会变！可以打开F12控制台Network中查看请求的参数
tableFilter最核心的一个方法就是 tableFilter.render(options)
//1、加载CSS
//2、定义layui组件 得到 tableFilter 对象
var tableFilter = layui.tableFilter;
//3、定义一个tableFilter 挂载到 table 上
var tableFilterIns = tableFilter.render({
'elem' : '#localtable',//table的选择器
'mode' : 'local',//过滤模式
'filters' : [],//过滤项配置
'done': function(filters){
//结果回调
}
})
options参数说明
| 参数选项 | 说明 | 类型 | 示例值 |
|---|---|---|---|
| elem | 指定原始 table 容器的选择器。 | string | "#table" |
| mode |
设置过滤方式。
|
string | "local" |
| parent | 指定过滤选择器 append 到哪（可有效解决位置问题，比如本文档演示）。非必填，默认在 body 底部 | string | "body" |
| filters | 配置过滤项，具体请详见下一张关于filters的参数说明。 | Array | [{},{}] |
| done | 每一次过滤/移除过滤都将会触发回调，返回 filters 所有过滤条件 不管mode是什么方式，都将返回 filters | Function | - |
filters参数说明
filters 是一个对象数组 定义哪几个列使用哪种过滤类型
| 参数选项 | 说明 | 类型 | 示例值 |
|---|---|---|---|
| field | 指定哪列使用过滤，与 table 中 cols 里的 field 同值。 | string | "id" |
| name | 用于api过滤方式，服务端需要的的参数名。不填则取 field 的值 | string | "ID" |
| type |
设置过滤类型。
|
string | "input" |
| data | 用于单选/多选自定义显示过滤项，格式如下。非必填
[{ "key":"1", "value":"有效"},{ "key":"0", "value":"失效"}]
|
Array | [{},{}] |
| url | 用于单选/多选AJAX显示过滤项，暂只支持 GET 方式，请求url地址，务必返回格式如下。非必填
{
"code": 0,
"msg": "",
"data": [
{ "key":"1", "value":"有效"},
{ "key":"0", "value":"失效"}
]
}
|
string | "josn/filter.json" |