如何销毁数据表的第一次初始化(模态内的数据表) [英] How to destroy first initialization of datatable (DataTable inside a modal)

问题描述

我有一个显示表格的模式.我使用数据表插件，以便数据可搜索和排序.它起初工作正常，但是当我关闭模态并单击指向同一模态的其他链接时，它显示错误.我找到了销毁数据表的解决方案，我在数据表初始化之前放置了 destroy() 但随后表内没有显示任何数据..如果我在初始化之后放置它，它给了我第二次单击按钮时出现初始化错误.我将如何解决这个问题?

I have a modal that displays a table. And I use datatable plugin so that the data is searchable and sortable. It works properly at first but when I close the modal and click other link to the same modal, it displays error. I have found solution to destroy the DataTable and I put the destroy() before the initialization of the datatable but then no data is displayed inside the table.. if I put it after the initialization it gave me the initialization error the second time I click the button. How am I going to solve this?

这是我的代码:

    $.ajax({
      url: "<?php echo site_url('admin/group/getMember')?>",
      type: 'POST',
      data: { 'groupID': id},
      dataType: 'JSON',
      success: function(result){
        $('#records_table tbody').empty();
        // $('#records_table').DataTable({
            // "bLengthChange": false,
            // "paging":false,
        // });
        $('.modal-header #hdrmsg').text(result[0].fname);
        var trHTML='';

         $.each(result, function (i, item) {
            trHTML += '<tr><td>' + item.fname + '</td><td>' + item.mname + '</td><td>' + item.lname + '</td></tr>';
        });
        $('#records_table tbody').append(trHTML);
        $('#records_table').DataTable({
            "bLengthChange": false,
            "paging":false,
        });
        $('#records_table').DataTable().fnDestroy();

      }

  });

推荐答案

销毁 dataTables 实例的主要原因是如果您想更改初始化选项 - 比如更改 paging 等.或者如果表结构应该改变.这些情况似乎都不是这里的情况?要回答这个问题，销毁和重新初始化表的最安全方法是使用速记选项 destroy: true :

The main reason for destroying a dataTables instance is if you want to change the initialisation options - like change paging and so on. Or if the table structure should be altered. None of those circumstances seems to be the case here? To answer the question, the safest way to destroy and reinitialise a table is to use the shorthand option destroy: true :

var table = $('#records_table').DataTable({
   ...
   destroy : true
});

更进一步，我认为你做得有点倒退.

To go further, I think you are doing it a little backwards.

• 为什么用 jQuery $('#records_table tbody').empty(); 而不是 table.clear() 清空表格?
• 为什么使用 jQuery $('#records_table tbody').append(trHTML); 而不是使用 table.row.add([...]) 注入记录> ?

• Why empty the table with jQuery $('#records_table tbody').empty(); instead of table.clear() ?
• Why inject records with jQuery $('#records_table tbody').append(trHTML); instead of using table.row.add([...]) ?

这是一个类似于问题中的代码场景，它在每次显示模态时重新初始化数据表而不会发生冲突:

Here is a code scenario similar to the one in the question, which reinitialises the dataTable without conflicts, each time the modal is shown :

var table;
$('#modal').on('show.bs.modal', function() {
   $.ajax({
      url: url,
      dataType: 'JSON',
      success: function(response) {
         var response = $.parseJSON(response.contents);

         //clear the table, if it exists
         if (table) table.clear();

         //reinitialise the dataTable   
         table = $('#records_table').DataTable({
           destroy: true,
           bLengthChange: false,
           paging: false
         });

         $.each(response, function(i, item) {
           console.log("inserting", item);
           table.row.add([
             item.name,
             item.position
           ]).draw();
         });
       }
    });
});       

看演示 -> http://jsfiddle.net/bz958dxj/

see demo -> http://jsfiddle.net/bz958dxj/

但是你真的根本不需要销毁表，它只会降低性能:

But you really dont need to destroy the table at all, it just slows down performance :

//global table object
table = $('#records_table').DataTable({
   bLengthChange: false,
   paging: false
});

$('#modal').on('show.bs.modal', function() {
   $.ajax({
      url: url,
      dataType: 'JSON',
      success: function(response) {
         var response = $.parseJSON(response.contents);

         //clear the table
         table.clear();

         //insert data 
         $.each(response, function(i, item) {
           console.log("inserting", item);
           table.row.add([
             item.name,
             item.position
           ]).draw();
         });
       }
    });
});   

演示 -> http://jsfiddle.net/8mjke9ua/

demo -> http://jsfiddle.net/8mjke9ua/

注意:我只是假设我们正在讨论引导模式，基于问题中对 .modal-header 的引用.

NB: I just assume we are talking about bootstrap modals, based on the reference to .modal-header in the question.

注意²:注意$.parseJSON(response.contents)，你应该像你在问题中所做的那样去做.唯一的原因是这些示例通过代理来避免同源策略.

NB²: Notice the $.parseJSON(response.contents), you should do it as you are doing it in the question. The only reason for this is that the examples go trough a proxy to avoid the same-origin policy.

这篇关于如何销毁数据表的第一次初始化(模态内的数据表)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！