在删除Datatables 1.10中的html内容时按列排序

Question

我取消使用datatable 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);

我也在使用数据表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事件中执行此fnDrawCallback ：

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