Question

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

我也试过了$('#attachmentData').dataTable().destroy();但是我的代码

出错了

未捕获的TypeError：无法读取未定义的属性“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>

jquery datatable footer被附加而不是使用destroy

1 个答案: