Question

我正在使用数据表1.10，根据我的要求，我在其中一个列中的代码中添加了一个HTML复选框标记。

现在第一次呈现表时，它会向我显示这些复选框，但是当我单击该列进行排序或任何其他列进行排序时，包含HTML的列将被删除。（我使用chrome DOM检查器对此进行了交叉检查... td元素不包含任何内容:(）

下面是我的dataTable初始化代码。

dataTableOptions: function() {
            return {
                "orderable": true,
                "columnDefs": undefined,
                "autoWidth": true, 
                "deferRender": true, 
                "data": undefined
            };
        },
        dtRowGroupingOptions: function () {
            return {
                bExpandableGrouping: true,
                bExpandSingleGroup: false,
                iExpandGroupOffset: -1,
                asExpandedGroups: [""]
            };
        }

var dataTablesOptions = self.dataTableOptions();
                    dataTablesOptions.data = tableData;
                    dataTablesOptions["paginate"] = false;
                    dataTablesOptions["lengthChange"] = false;
                    dataTablesOptions["columnDefs"] = [{"targets": 0, "data": "serverName", 'title' : 'ServerName'},
                       {"targets": 1, "data": "COMMAND", 'title' : 'Command'},
                       {"targets": 2, "data": "PID", 'title' : 'Process Id'},
                       {"targets": 3, "data": "SIZE", 'title' : 'Size'},
                       {"targets": 4, "data": "USER", 'title' : 'User'},
                       {"targets": 5, "data": "action", 'title' : 'Actions', "type" : "html", "orderDataType": "dom-checkbox"}
                       ];

                    dataTablesOptions["createdRow"] = function (nRow, aData, iDataIndex) {
                        var self = this;
                        if (aData["comments"] && aData["comments"].indexOf("Error") != -1) {
                            // Do not do anything 
                            $('td:eq(0)', nRow).html(aData["serverName"]+"" +
                            "<a class='btn btn-danger' href='#' data-toggle='tooltip' title='Error in execution'><i class='icon-question'></i></a>");
                        } 
                        return self;
                    };

var dcInfoDataTable = contentDiv.find('table.dcInfoTable').DataTable(dataTablesOptions);

我也在使用datatables rowGrouping和searchhiglight插件，下面是代码。

// call row grouping
                    contentDiv.find('table.dcInfoTable').dataTable().rowGrouping(self.dtRowGroupingOptions());
                    // enable search highlighing
                    contentDiv.find('table.dcInfoTable').dataTable().fnSearchHighlighting();

注意：我尝试删除rowGrouping插件代码只是为了确保因为这个插件没有发生这种情况，但即使在删除后没有效果，HTML内容也会被删除。

Answer 1

不仅在排序时它会清除您的数据，如果您使用任何其他更改表格的功能，它也会清除它。这是因为每次数据表绘制新数据时，都会清除静态数据。

您需要在每次抽奖中重新附加复选框，您可以在fnDrawCallback事件中执行此操作：

$(document).ready( function() {
  $('#example').dataTable( {
    "fnDrawCallback": function( oSettings ) {
      alert( 'DataTables has redrawn the table' );
      //append the checkbox to your table columns here...
    }
  } );
} );

在删除Datatables 1.10中的html内容时对列进行排序

1 个答案: