87,997
社区成员
发帖
与我相关
我的任务
分享jq datatables 分页事件问题！
项目中有引用 jq的插件 datatables 感觉很强大很好用
现在遇到个问题
我在列表数据上做了一些效果 点击某个数据时 提示气泡 （ajax异步获取一些相关信息）
问题来了
点击几个数据后 再数据的上方会弹出一些气泡
再点datatables的分页按钮（上一页 下一页 1，2,3，5）或者选改变数据数量或者搜索数据等按钮后
气泡是没有关闭的 这样是不对的
我想 能不嫩获取datatables 改变数据的事件 然后修改下 在里面加上JS把气泡关掉
但是找了半天不知道在什么位置
哪位大侠能帮忙找找 或者提供些别的思路也行
现在遇到个问题
我在列表数据上做了一些效果 点击某个数据时 提示气泡 （ajax异步获取一些相关信息）
问题来了
点击几个数据后 再数据的上方会弹出一些气泡
再点datatables的分页按钮（上一页 下一页 1，2,3，5）或者选改变数据数量或者搜索数据等按钮后
气泡是没有关闭的 这样是不对的
我想 能不嫩获取datatables 改变数据的事件 然后修改下 在里面加上JS把气泡关掉
但是找了半天不知道在什么位置
哪位大侠能帮忙找找 或者提供些别的思路也行
...全文
请发表友善的回复…
发表回复
islove1945 2014-09-04
- 打赏
- 举报
$("#dataTableID_paginate").on("click", "a", function() { alert("clicked") });
hzxxly 2013-01-25
- 打赏
- 举报
页面加载后 为DIV1 里面的span 点击事件创建气泡 然后DIV中的Table 装入 datatables
装入datatables 后 DIV1里面 会出现一些分页标签 然后给所有A标签 创建点击事件 关闭 span的气泡
现在就是 如果在第一页点击一个SPAN标签 会弹出相应气泡 然后点下一页 数据先分页了 气泡关不掉 再点 上一页 的时候 数据分页 气泡关掉了。
我分析就是 分页先执行了 选择器找不到要关闭的SPAN气泡 当再点 上一页 选择器又能找到SPAN的气泡了 所以关闭了
hzxxly 2013-01-25
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<link href="css/tip-darkgray/tip-darkgray.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="js/jquery.poshytip.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script>
function del(id)
{
$("#"+id+"").poshytip('hide');
}
$(function () {
$("#div1 span").each(function () {
var s=$(this).attr("id");
$(this).poshytip({
className:'tip-darkgray',
showOn:'none',
alignTo:'target',
alignX:'inner-left',
offsetX:0,
offsetY:5,
content:function (updateCallback) {
$.ajax({
url:'Handler.ashx',
data:{
"id":s
},
cache:false,
success:function (txt) {
updateCallback(txt);
}
});
}
});
$(this).click(function () {
$(this).poshytip('show');
});
});
}
);
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="div1">
<table class="style1" id="example">
<thead>
<tr><td>城市</td></tr>
</thead>
<tbody>
<tr><td><span style="cursor:pointer" id="Span1">北京</span></td></tr>
<tr><td><span style="cursor:pointer" id="Span2">上海</span></td></tr>
<tr><td><span style="cursor:pointer" id="Span3">成都</span></td></tr>
<tr><td><span style="cursor:pointer" id="Span4">辽宁</span></td></tr>
<tr><td><span style="cursor:pointer" id="Span5">吉林</span></td></tr>
<tr><td><span style="cursor:pointer" id="Span6">江苏</span></td></tr>
<tr><td><span style="cursor:pointer" id="Span7">山西</span></td></tr>
<tr><td><span style="cursor:pointer" id="Span8">山东</span></td></tr>
<tr><td><span style="cursor:pointer" id="Span9">河北</span></td></tr>
<tr><td><span style="cursor:pointer" id="Span10">河南</span></td></tr>
<tr><td><span style="cursor:pointer" id="Span11">新疆</span></td></tr>
<tr><td><span style="cursor:pointer" id="Span12">内蒙</span></td></tr>
</tbody>
</table>
</div>
</form>
<script type="text/javascript"charset="utf-8">
$(document).ready(function () {
$('#example').dataTable();
$('#div1 a').click(function () {
$("#div1 span").each(function () {
$(this).poshytip('hide')
})
});
});
</script>
</body>
</html>
斯洛文尼亚旅游 2013-01-25
- 打赏
- 举报
$('#div1 a').click(function(){
$("#div1 span").each(function(){$(this).poshytip('hide')})
});
气泡选择器没对吧。。。气泡放在导航里面？
hzxxly 2013-01-25
- 打赏
- 举报
出了个问题
$('#div1 a').click(function(){
$("#div1 span").each(function(){$(this).poshytip('hide')})
});
当点击下一页的时候 气泡关不掉
分析原因是 找不到要关闭气泡的span标签 好像先分页成功了才执行关闭气泡事件 页面没有上一页的SPAN了 所以关不掉
版主帮忙想个办法把
斯洛文尼亚旅游 2013-01-25
- 打赏
- 举报
用jq给分页控件容器增加click事件隐藏你的气泡就行了
$('分页控件容器选择器').click(function(){
$('气泡选择器').hide();
});
