有关于这个问题的讨论，似乎终于解决了。

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节点或类以指示它被选中，并且还可以在完成克隆以更新时使用固定列。我确信基于相同的原则，可能还有其他选择。

阅读更多内容：

Datatables Forum #1

Datatables Forum #2

Answer 2

我想在用户单击固定列标题中可用的复选框时调用 JS 函数，

我使用了类值而不是 ID

<th id="col1"><input type="checkbox" id="chkall_id" name="chkall_name" value="1" class="chkall_clz"></th>

$('.chkall_clz').change(function () {
    if($(".chkall_clz").is(':checked')){
        alert('Checked');
    }else{
        alert('Not checked');
    }

固定列中的jQuery DataTables复选框

2 个答案:

有关于这个问题的讨论，似乎终于解决了。