jquery 数据表页脚被附加而不是使用破坏

Question

我的 jQuery 数据表页脚被附加而不是使用破坏函数。我在单击另一个 DataTable 的行时创建一个新的 DataTable，每次单击时我都会根据我单击的行创建新的 DataTable。当我使用'destroy': true 重新创建新的 DataTable 时，之前加载的 DataTable 页脚存在并且新的 Table 页脚会附加其页脚，因此两个页脚都存在。

我也试过$('#attachmentData').dataTable().destroy();，但它在我的代码中给出了错误

未捕获的类型错误：无法读取未定义的属性“aDataSort”

所以我改为使用'destroy': true，它可以正常工作，但我遇到了这个页脚附加的问题。你能告诉我哪里出错了吗？

$('#attachmentData').dataTable({
    'aoColumnDefs': [{ 
        "sClass": "hide_me", 
        "aTargets": [0] 
    }],
    'destroy': true,
    'data': response,
    'columns': [{
        "title": "Attachment UId",
        "data": "AttachmentUid"
    }, {
        "title": "Attachment Name",
        "data": "AttachmentName"
    }, {
        "title": "Attachment Type",
        "data": "AttachmentType"
    }, {
        "title": "Created On",
        "data": "CreatedOn"
    }, {
        "title": "Printout",
        "data": "Printout"
    }]
});

Answer 1

要在 DataTables 1.10 中手动销毁表，您需要调用 API 方法，如下所示。请参阅API 了解更多信息。

$('#attachmentData').dataTable().api().destroy();

或

$('#attachmentData').DataTable().destroy();

DataTables 似乎没有使用columns.title 选项更新页脚。见columns.title，它只提到更新<thead>元素。

解决方法是自己更新页脚，例如：

 $('#attachmentData tfoot tr').html(
    '<th>Attachment UId</th>' +
    '<th>Attachment Name</th>' +
    '<th>Attachment Type</th>' +
    '<th>Created On</th>' +
    '<th>Printout</th>'
);

代码和演示请参见下面的示例。

var response = [
   {
     "AttachmentUid": 0,
     "AttachmentName": "AttachmentName",
     "AttachmentType": "AttachmentType",
     "CreatedOn": "CreatedOn",
     "Printout": '<button class="btn" type="button">Click me</button>'
   },
   {
     "AttachmentUid": 0,
     "AttachmentName": "AttachmentName",
     "AttachmentType": "AttachmentType",
     "CreatedOn": "CreatedOn",
     "Printout": '<button class="btn" type="button">Click me</button>'
   },
   {
     "AttachmentUid": 0,
     "AttachmentName": "AttachmentName",
     "AttachmentType": "AttachmentType",
     "CreatedOn": "CreatedOn",
     "Printout": '<button class="btn" type="button">Click me</button>'
   }
];
     
     
$(document).ready(function() {
   initTable();

  $('#example').on('click', '.btn', function(){
      $.each(response, function(index, obj){
         obj["AttachmentUid"]++;
      });
    
      initTable();
   });
});

function initTable(){
   var rnd = Math.floor((Math.random() * 10) + 1); 
  
   // Update footer headings
   $('#example tfoot tr').html(
      '<th>Attachment UId ' + rnd + '</th>' +
      '<th>Attachment Name ' + rnd + '</th>' +
      '<th>Attachment Type ' + rnd + '</th>' +
      '<th>Created On ' + rnd + '</th>' +
      '<th>Printout ' + rnd + '</th>'
  );
  
   $('#example').dataTable({
    'aoColumnDefs': [{ 
        "sClass": "hide_me", 
        "aTargets": [0] 
    }],
    'destroy': true,
    'data': response,
    'columns': [
      {
        "title": "Attachment UId " + rnd,
        "data": "AttachmentUid"
      }, {
        "title": "Attachment Name " + rnd,
        "data": "AttachmentName"
      }, {
        "title": "Attachment Type " + rnd,
        "data": "AttachmentType"
      }, {
        "title": "Created On " + rnd,
        "data": "CreatedOn"
      }, {
        "title": "Printout " + rnd,
        "data": "Printout"
      }
    ]
   });
}

<link href="http://datatables.net/release-datatables/media/css/jquery.dataTables.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>AttachmentUid</th>          
            <th>AttachmentName</th>
            <th>AttachmentType</th>
            <th>CreatedOn</th>
            <th>Printout</th>
        </tr>
    </thead>
 
    <tfoot>
        <tr>
            <th>AttachmentUid</th>          
            <th>AttachmentName</th>
            <th>AttachmentType</th>
            <th>CreatedOn</th>
            <th>Printout</th>
        </tr>
    </tfoot>
 
</table>