Destroy and recreate a jQuery Datatables

Question

I have two jQuery datatables with server side processing. I have a checkbox where I hide and show the two tables. I would like to destroy the none displayed and create another table. How would I do this?

This is what I tried but ajax.reload does not fire.

if ($('#mode').is(':checked')) {
    Table2.ajax.reload();
    Table1.clear();
    Table1.destroy();
} else {
    Table1.ajax.reload();
    Table2.clear();
    Table2.destroy()
}

var Table1 = $('#timesheet-table').DataTable({})
var Table2 = $('#timesheet-table-2').DataTable({})

Answer 1

In my case, to reset the table I just do this:

$('#table_id').DataTable().clear().destroy();
$('#table_id').empty();

With that you'll reset the table back to it's initial state and you may reinitialize it after that.

Answer 2

as I see it you will never show 2 datatables in your page so why not use only one. you can initialize your datatable and use a sequence like this

table.destroy();
$('#myTable').empty();
table = $('#myTable').DataTable( {
        columns: json.columns,
        data:    json.rows
});

to recreate it as needed.

Answer 3

You have to clear the div content for properly destroy

 if($('#mode').is(':checked')) {
      Table2 = $('#timesheet-table-2').DataTable({})
      Table1.clear();
      Table1.destroy();
      $('#timesheet-table').empty();
} 

else {
  Table1 = $('#timesheet-table').DataTable({})
  Table2.clear();
  Table2.destroy();
  $('#timesheet-table-2').empty();
}

Answer 4

You could try something like this (Here is a fiddle that might help):

function loadDataTable(type) {
  $('#dataTableDiv').empty();
  $('#dataTableDiv').append('<table cellpadding="0" cellspacing="0" border="0" class="dataTable table table-striped" id="example"> </table>');

  var table1_columnList = [{
    "data": "otherId",
    "title": "Other ID"
  }, {
    "data": "firstName",
    "title": "First Name"
  }, {
    "data": "lastName",
    "title": "Last Name"
  }, {
    "data": "gender",
    "title": "Gender"
  }];

  var table2_columnList = [{
    "data": "id",
    "title": "ID"
  }, {
    "data": "firstName",
    "title": "First Name"
  }, {
    "data": "lastName",
    "title": "Last Name"
  }, {
    "data": "gender",
    "title": "Gender"
  }, {
    "data": "dob",
    "title": "DOB"
  }, {
    "data": "race",
    "title": "Race"
  }];

  var columnList = "";

  if (type == 'table1')
    columnList = table1_columnList;
  else
    columnList = table2_columnList;


  myTable = $('#example').DataTable({
    "sPaginationType": "full_numbers",
    data: datavar,
    columns: columnList,
    responsive: true,
  });

}