<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简约表格插件</title>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/demo/jquerytablePlugin201901132312/js/tableXR.js"></script>
<script src="https://www.jq22.com/demo/jqueryimghover201908121457/jquery.followPopup.min.js"></script>
<script tpye="text/javascript">
$(function() {
$('.imgs').followPopup({
html: '<img src="" alt="">',
afterEnter: function($this) {
console.log($this);
var url = $this.data('imgurl');
$('.js-followPopup').children('img').attr('src', url);
},
onMove: function($this) {
},
beforeOut: function($this) {
}
});
});
</script>
</head>
<body>
<div id="root" style="width: 800px"></div>
<script type="text/javascript">
$('#root').tableXR({
//表格标题
title:'学生成绩列表',
//表格头部设置
columns:[
{data:'name',title:'名字'},
{data:'touxiang',title:'头像'},
{data:'age',title:'年龄'},
{data:'store',title:'得分'},
{data:'level',title:'等级'},
],
//表格数据：
data:[
{name:'小红',touxiang:'<div class="imgs" data-imgurl="https://pic3.zhimg.com/80/v2-e033acbeacba3cd43e4874b1fa34afc8_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'18',store:'98',level:'A'},
{name:'小化',touxiang:'<div class="imgs" data-imgurl="https://pic1.zhimg.com/80/v2-6686ee738ca21e0fa223a462a842b4ca_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'18',store:'97',level:'A'},
{name:'小杰',touxiang:'<div class="imgs" data-imgurl="https://pic1.zhimg.com/80/v2-d8f866ce9142c82ab067cc9ee6931911_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'15',store:'95',level:'A'},
{name:'小刚',touxiang:'<div class="imgs" data-imgurl="https://pic1.zhimg.com/80/v2-e39e88eef5e214216a14fc5ff3d0e31e_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'17',store:'95',level:'A'},
{name:'大水',touxiang:'<div class="imgs" data-imgurl="https://pic2.zhimg.com/80/v2-ccfc127b3a68559e192af9ac4db6ed96_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'23',store:'97',level:'A'},
{name:'小胡',touxiang:'<div class="imgs" data-imgurl="https://pic1.zhimg.com/80/v2-732f315e27284d5c4564391036ae1a3a_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'22',store:'88',level:'B'},
{name:'热热',touxiang:'<div class="imgs" data-imgurl="https://pic3.zhimg.com/80/v2-a522a86bba3c0e3cbc9dcc8a38f5bfac_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'19',store:'90',level:'A'},
{name:'二娃',touxiang:'<div class="imgs" data-imgurl="https://pic1.zhimg.com/80/v2-bb04d65dd48a08e122b0e5cd6803042b_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'17',store:'92',level:'A'},
{name:'小瑟',touxiang:'<div class="imgs" data-imgurl="https://pic1.zhimg.com/80/v2-9bbddf8c625d251d9a9e608238425d62_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'16',store:'89',level:'B'},
{name:'滑板',touxiang:'<div class="imgs" data-imgurl="https://pic3.zhimg.com/80/v2-cda2d3096180fd1f4de7f8b99b6cee11_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'15',store:'91',level:'A'},
{name:'Dddd',touxiang:'<div class="imgs" data-imgurl="https://pic2.zhimg.com/80/v2-2b2889bd0cbd2a552ab7e79fd7a4ba0a_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'17',store:'95',level:'A'},
{name:'DSDd',touxiang:'<div class="imgs" data-imgurl="https://pic3.zhimg.com/80/v2-5272433d9f59a6cec2cd7380051c5651_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'17',store:'95',level:'A'},
{name:'DSDd',touxiang:'<div class="imgs" data-imgurl="https://pic2.zhimg.com/80/v2-5c5c588f66c5de97d488a693795b4c06_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'17',store:'95',level:'A'},
{name:'DSDd',touxiang:'<div class="imgs" data-imgurl="https://pic1.zhimg.com/80/v2-45cb7bd2ae4a16036acbebe4f2677560_720w.jpg"><a target="_blank" href="#">头像</a></div>',age:'17',store:'95',level:'A'},
]
})
</script>
</body>
</html>
其中，这是一段悬停显示图片的代码会失效。
$(function() {
$('.imgs').followPopup({
html: '<img src="" alt="">',
afterEnter: function($this) {
console.log($this);
var url = $this.data('imgurl');
$('.js-followPopup').children('img').attr('src', url);
},
onMove: function($this) {
},
beforeOut: function($this) {
}
});
});
页面第一次加载后（该页面只有一个表格），都是正常的，但是：只要执行了对该表格的翻页和搜索之后（用jQuery的filter()对页面表格搜索），搜索结果页面以及翻页后的页面，上面这段代码就会失效。
查了一下资料，好像是说这个 $(function() 方法不是全局函数。
还请帮我修改一下好吗？
另外，用jQuery的filter()进行搜索时，有没有办法搜索两个关键词呢？也就是说，只有同时包含这两个关键词的行，才是满足搜索要求的，且：在搜索框中输入时，这两个关键词不分先后。
实例页面：
简约表格插件
https://www.jq22.com/demo/jquerytablePlugin201901132312/
其中的js地址如下：
https://www.jq22.com/demo/jquerytablePlugin201901132312/js/tableXR.js
搜索代码在上述js文件的75～93行（貌似）～
