datatables隐藏列与createdRow渲染bootstrapSwitch形成的BUG

背景:

昨天写了一个页面用于规则库的增删改查。

数据使用datatables渲染,后端返回数据由前端进行一次性渲染和分页。

隐藏列:

排序的ID不展示,但是排序又想按照ID来排,所以把ID单独作为一列,按照ID列排序,再隐藏掉。

//排序部分
"order": [[0, "asc"]],

//隐藏部分
"columnDefs": [
    { "visible": false, "targets": 0 }
]

这样就按照ID排序而又不显示ID。

createdRow渲染bootstrapSwitch:

"createdRow": function (row, data, index) {
    $('#mySwitch input').bootstrapSwitch({
    });
},

在datatables每完成一次tr代码转换后,渲染一遍按钮bootstrapSwitch。

成因:

渲染按钮的时候,是对该页面的所有按钮进行渲染。

datatables进行tr的转换,是一行一行地转换代码。

当转换了第一行代码时,第一行的id列被隐藏掉,所以第一行按钮所在的td宽度会比其他行的宽度都长;这个时候对该表单中所有按钮都进行渲染,第一行按钮的宽度会比其他行按钮的宽度都大。

转换到第二行的时候,再进行所有按钮的渲染,这时候按钮已被bootstrapSwitch渲染过,无法二次渲染。

ps:因为外部宽度增大而按钮宽度不变,bootstrapSwitch按钮多了一点间隙。

现象:

表单中ID首位的行中的按钮比其他行的宽,不管按照什么排序;

不进行隐藏,则没有这个BUG。

这样比较难定位,排除了css、JS加载缺失的原因,这其中关联datatables内部的渲染过程,而现象又诡异。

最后用console.log将createdRow每次转换后的代码跟踪一遍,解决问题。

 

解决:

createdRow中不渲染所有按钮,而只渲染当前 tr 的按钮。

"createdRow": function (row, data, index) {
    $(row).find('#mySwitch').children('input').bootstrapSwitch({
    });
},
原文地址:https://www.cnblogs.com/huim/p/9923760.html