使用datatables绑定数据遇见问题

天上下雨

于 2021-04-07 20:14:40 发布

阅读量326

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.youkuaiyun.com/feathercloudy/article/details/115494004

版权

前端专栏收录该内容

5 篇文章

订阅专栏

这篇博客记录了一个使用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) ($ scope);
},
});
}
在多次点击“上一页”、“下一页”、选中分页页码进行调整后，viewChatMessages()事件点击一次会执行多次，如不进行分页，则执行正常。始终找不到解决的办法，最后就只能在viewChatMessages()事件中进行判断，如第二次执行这返回false。