我正在使用
jquery.datatables插件和FixedColumns附加组件,并且遇到了一些问题,使两个表保持同步.
我表的前两行包含复选框.
由于数据是ajax加载的,我在JSON中为复选框返回“true”或“false”值,我将使用fnRowCallback动态创建并用适当的复选框替换“true”或“false”.
然后我添加了FixedColumns附加组件,虽然表最初正确加载,但后续重绘不会用复选框替换“true”或“false”值.
虽然fnRowCallback仍然会触发,但它只有表的一部分而且只有部分数据
请注意,此代码在TypeScript中,但与JS非常相似,可以在不知情的情况下理解
fnRowCallback: (row : DataTables.Settings,data: any[],displayIndex: number,displayIndexFull: number) : void => { if($(row).children("td.checkboxColumn").length > 0){ var isFlaggedIdentifier = 'isFlaggedCheckbox_' + displayIndexFull; var isFlaggedCheckbox = $('<input />',{ type: 'checkbox',id: isFlaggedIdentifier,'class': 'tableCheckboxInput',value: isFlaggedIdentifier }); var isFlaggedLabel = $('<label />',{ 'for': isFlaggedIdentifier,'class': 'tableCheckboxLabel' }); var isFlagged: bool = $(row).children("td").eq(1).text() === "TRUE"; var flaggedCheckboxEntry = $(row).children("td").eq(1); if(flaggedCheckboxEntry.hasClass("checkboxColumn")){ flaggedCheckboxEntry.html(isFlaggedCheckbox); flaggedCheckboxEntry.append(isFlaggedLabel); } } }
根据文档,似乎FixedColumns没有fnRowCallback.它只有fnDrawCallback,它只在它绘制的表之后触发一次,所以虽然我没有尝试过它但我担心它会导致“true”/“false”在被复选框替换之前闪烁.
如果这个假设是真的,在渲染表之前,我该怎么做才能替换复选框.
解决方法
关于这个问题有一个讨论,似乎终于解决了.
要注意的“技巧”是FixedColumns是克隆元素,而不是原始(使用DataTables的列可见性选项隐藏).当克隆被更新时,你的复选框节点被删除,然后在原件上被替换(注意这是与FixedColumns,而不是自己的DataTables),因此问题 – 原件尚未检查克隆,现在他们走了……
因此有两种方法可以解决这个问题 – 第一种方法是为克隆中的元素设置’更改’事件处理程序,当检查时将更新原始文件,因此克隆时它们将以正确的状态克隆.另一种选择是使用类似的事件处理程序并使用整行选择标志,即将参数添加到TR节点或类以指示它被选中,并且还可以在完成克隆以更新时使用固定列.我敢肯定,根据相同的原则,可能还有其他选择.
阅读更多: