使用datatables绑定数据遇见问题

这篇博客记录了一个使用Angular 1.2.16版本与Datatables 1.10.5版本结合时遇到的问题。在实现分页功能后,点击查看详情的事件viewChatMessages()被多次执行,原因是分页导致表格重新渲染。作者推测每次渲染都会重新绑定事件,从而造成事件执行次数过多,影响详细数据的正常显示。为解决这个问题,作者在事件内部进行了判断,限制了事件的执行次数。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

使用的angular框架,项目比较老,所以版本比较早,为 v1.2.16,绑定数据使用的是datatables来进行数据绑定,版本为V1.10.5 ,在绑定数据的时候遇到了一个问题,目前还没有找到处理的方法,此处为记录一下。
datatables绑定了一组数据,可以对点击行中的查看,查看详细的数据,目前的问题是在新增了分页之后,点击查看事件会被执行多次,我的理解是点击分页后会对表格进行再次渲染,然后渲染几次,事件就会被执行几次,造成的后果会导致详细数据无法正常显示。
代码如下:
function BindData(data) {
taskDataTable = $("#divShowInfo").dataTable({
“bDestroy”: true,
“oLanguage”: { “sUrl”: “…/…/Scripts/assets/plugins/data-tables/en.txt” },
“bSort”: false,
“bStateSave”: false,
“bPaginate”: true,
“bFilter”: false,
“iDisplayLength”: 5,
“sPaginationType”: “bootstrap_full_number”,
“bProcessing”: true,
“bServerSide”: false,
“aaData”: data,
“aLengthMenu”: [[5, 10, 20, 50, 100], [5, 10, 20, 50, 100]],
“aoColumns”: [
{
“mDataProp”: “id”,
“sTitle”: “编号”,
“mRender”: function (val, type, obj) {
return (val == null ? “” : val);
}
},
{
“mDataProp”: “name”,
“sTitle”: “姓名”,
“mRender”: function (val, type, obj) {
return (val == null ? “” : val);
}
},
{
“mDataProp”: “id”,
“sTitle”: “查看详细”,
“mRender”: function (val, type, obj) {
var shtml = ‘<a class=“btn btn-xs” title=“查看” style=“background-color:rgb(191,134,49);color:white;” ng-click=“viewChatMessages(’’ + val + ‘’)” >’;
return shtml;
}
}
],
“initComplete”: function (settings, json) {
$(‘div.dataTables_processing’).remove();
},
“fnRowCallback”: function (nRow, aData, iDisplayIndex) {
c o m p i l e ( n R o w ) ( compile(nRow)( compile(nRow)(scope);
},
});
}
在多次点击“上一页”、“下一页”、选中分页页码进行调整后,viewChatMessages()事件点击一次会执行多次,如不进行分页,则执行正常。始终找不到解决的办法,最后就只能在viewChatMessages()事件中进行判断,如第二次执行这返回false。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值