首先,请下载这个js文件:
下载地址:
https://www.jq22.com/demo/jquerytablePlugin201901132312/js/tableXR.js
另外,该js所在页面(方便你下载相关html代码,用于调试): 简约表格插件 https://www.jq22.com/demo/jquerytablePlugin201901132312/
需求:只是想修改一下这个js文件的搜索功能:改成支持多关键词(与)的搜索结果【也就是同时满足两个关键词的搜索结果,详见下面的图片】
其中涉及的搜索代码是这一段(75-95行,其他代码是否也和搜索相关我就不敢确定了~)
//搜索功能
if (searchVal !== "") {
$('tbody', this.$ele).html('正在搜索中...');
data = data.filter(function (d) {
return Object.keys(d).some(function (key) {
return new RegExp(searchVal).test(d[key]);
});
});
cb(data);
if (data.length === 0) {
$('tbody', this.$ele).html('<tr><td colspan="' + columns.length + '">\u62B1\u6B49,\u672A\u627E\u5230\u76F8\u5173\u6570\u636E</td></tr>');
return false;
}
} else {
$('tbody', this.$ele).html('');
cb(undefined);
}
改后预期:可以搜索两个关键词,两个关键词用空格隔开,只有同时包含这两个关键词的行,才是满足搜索要求的,
且:在搜索框中输入时,_这两个关键词不分先后_。
比如在搜索框中 输入 “小 B” 或 “B 小”时
都可以显示如下结果:
数据源可以修改如下,就会有4条满足搜索条件的结果了:
<script type="text/javascript">
$('#root').tableXR({
//表格标题
title:'学生成绩列表',
//表格头部设置
columns:[
{data:'name',title:'名字'},
{data:'age',title:'年龄'},
{data:'store',title:'得分'},
{data:'level',title:'等级'},
],
//表格数据:
data:[
{name:'小红',age:'18',store:'98',level:'A'},
{name:'小化',age:'18',store:'97',level:'A'},
{name:'小杰',age:'15',store:'95',level:'A'},
{name:'小刚',age:'17',store:'95',level:'A'},
{name:'大水',age:'23',store:'97',level:'A'},
{name:'小胡',age:'22',store:'88',level:'B'},
{name:'热热',age:'19',store:'90',level:'A'},
{name:'二娃',age:'17',store:'92',level:'A'},
{name:'小瑟',age:'16',store:'89',level:'B'},
{name:'滑板',age:'15',store:'91',level:'A'},
{name:'小二B',age:'17',store:'95',level:'A'},
{name:'DSD',age:'17',store:'95',level:'A'},
{name:'曲江小区 405B',age:'17',store:'95',level:'A'},
{name:'DSD',age:'17',store:'95',level:'A'},
]
})
</script>