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

Posted 2023-05-09

【中文标题】jquery 数据表页脚被附加而不是使用破坏

【英文标题】：jquery datatable footer gets appended instead of using destroy

【发布时间】：2015-09-09 01:07:54

【问题描述】：

我的 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"
    ]
);

【问题讨论】：

尝试添加 'bSort': false

【参考方案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" >
    <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>