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?

here's my code:

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

      }

  });

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?

here's my code:

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

      }

  });

• javascript
• jquery
• ajax
• datatables

• What about use destroy() when you are closing modal? – CorwinCZ Commented Mar 16, 2015 at 9:28
• @CorwinCZ, where will I put that code? How? I already tried $('#viewMember').on('hidden.bs.modal', function (event) { $('.modal-body #records_table').DataTable().fnDestroy(); }); but still the same problem occur.. it didn't destroy the datatable. – d_unknown Commented Mar 16, 2015 at 11:26
• @CorwinCZ, and also when I tried modal on hide, the modal now can't be closed.. – d_unknown Commented Mar 16, 2015 at 11:28
• 1 @d_unknown - have replaced the datatable tag with the jquery-datatables tag. The datatable tag was originally a .NET tag, now ambigous / obsolute - jQuery dataTables is (was) identified by the datatables tag, now jquery-datatables or datatables-1.10 tags. – davidkonrad Commented Mar 16, 2015 at 17:37

1 Answer 1

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.

• 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();
         });
       }
    });
});       

see demo -> http://jsfiddle/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();
         });
       }
    });
});   

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

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

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.