Как уничтожить первой инициализации объекта DataTable (объект DataTable внутри модального)

У меня есть модал, который отображает таблицу. И я использую DataTable плагин, чтобы данные были доступны для поиска и сортировки. Сначала он работает правильно, но когда я закрываю модальный и нажимаю другую ссылку на тот же модальный, он отображает ошибку. Я нашел решение, чтобы уничтожить DataTable, и я поставил destroy() перед инициализацией datatable, но тогда никакие данные не отображаются внутри таблицы.. если я ставлю его после инициализации, он дает мне ошибку инициализации при втором нажатии кнопки. кнопка. Как я собираюсь решить эту проблему?

Вот мой код: 

    $.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();

      }

  });
1 3
javascript jquery ajax jquery-datatables

1 ответ:

Основная причина уничтожения экземпляра dataTables заключается в том, что вы хотите изменить параметры инициализации - например, изменить paging и так далее. Или если структура таблицы должна быть изменена. Кажется, здесь нет ни одного из этих обстоятельств? Чтобы ответить на этот вопрос, самый безопасный способ уничтожить и повторно инициализировать таблицу-это использовать сокращенный вариант destroy: true: 

var table = $('#records_table').DataTable({
   ...
   destroy : true
});
Чтобы пойти дальше, я думаю, что вы делаете это немного назад.
  • зачем опустошать таблицу с помощью jQuery $('#records_table tbody').empty(); вместо table.clear() ?
  • зачем вводить записи с помощью jQuery $('#records_table tbody').append(trHTML); вместо использования table.row.add([...])?

Вот сценарий кода, похожий на тот, что в вопросе, который повторно инициализирует dataTable без конфликтов, каждый раз, когда модальный показан: 

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/

Но вам действительно не нужно уничтожать таблицу вообще, это просто замедляет производительность :

//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/

NB : я просто assume мы говорим о модальностях bootstrap, основываясь на ссылке на .modal-header в вопросе.

NB 2: Обратите внимание на $.parseJSON(response.contents), вы должны сделать это, как вы делаете это в вопросе. Единственная причина этого заключается в том, что примеры идут через прокси, чтобы избежать политики того же происхождения.

10