固定列中的jQuery DataTables复选框

Question

我正在使用jquery.datatables插件和FixedColumns附加组件,并且遇到了一些问题,使两个表保持同步.

我表的前两行包含复选框.

由于数据是ajax加载的,我在JSON中为复选框返回"true"或"false"值,我将使用fnRowCallback相应的复选框动态创建并替换"true"或"false".

然后我添加了FixedColumns附加组件,虽然表最初正确加载,但后续重绘不会用复选框替换"true"或"false"值.

虽然fnRowCallback仍然触发,但它只有表的一部分而且只有部分数据

Note this code is in TypeScript but resembles JS closely enough to understand without knowing it

 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"闪烁.

如果这个假设是真的,在渲染表之前,我该怎么做才能替换复选框.

Answer 1

关于这个问题有一个讨论,似乎终于解决了.

要注意的"技巧"是FixedColumns是克隆元素,而不是原始(使用DataTables的列可见性选项隐藏).当克隆被更新时,你的复选框节点被删除,然后在原件上被替换(注意这是与FixedColumns,而不是自己的DataTables),因此问题 - 原件尚未检查克隆,现在他们走了......

因此有两种方法可以解决这个问题 - 第一种方法是为克隆中的元素设置'更改'事件处理程序,当检查时将更新原始文件,因此克隆时它们将以正确的状态克隆.另一种选择是使用类似的事件处理程序并使用整行选择标志,即将参数添加到TR节点或类以指示它被选中,并且还可以在完成克隆以更新时使用固定列.我敢肯定,根据相同的原则,可能还有其他选择.

阅读更多:

数据表论坛#1

数据表论坛#2