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({})

Whats the Table1 and Table2 objects? JS variables that reference the tables i assume? — Master Yoda, Nov 24 '17 at 13:53
I'm guessing that Table1 and Table2 are initialised outside the scope of this if/else...? Perhaps put `console.log(Table);` in each block and see what it references...? — annoyingmouse, Nov 24 '17 at 13:59
by default I initialise Table1 than I give an id to the second on checked #timesheet-table-2 — fefe, Nov 24 '17 at 14:01
@fefe can you try this: http://jsbin.com/ququfutufi/edit?html,output — plonknimbuzz, Nov 28 '17 at 16:49

score 9 · Answer 1 · answered Nov 12 '18 at 21:06

9

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.

answered Nov 12 '18 at 21:06

Untherxadyus

151
2
4

This gave me an error when reinitializing the datatable, possibly because the Table-Head was removed as well. So instead of `$('#table_id').empty();` I used `$('#table_id').find("tbody").empty();` and everything runs fine now. – cjac Jun 24 '20 at 11:18

score 4 · Accepted Answer · answered Nov 24 '17 at 14:22

4

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.

answered Nov 24 '17 at 14:22

Paun Narcis Iulian

779
7
15

yeas but on each table I have different columns – fefe Nov 24 '17 at 14:26
columns: json.columns will let you change columns as defined. I was expecting something like this. see this: https://datatables.net/forums/discussion/30947/create-columns-from-data-pulled-from-ajax-json – Paun Narcis Iulian Nov 24 '17 at 14:29
so far the solution is seems to be the right one, but I'm not able to change the columns – fefe Nov 24 '17 at 15:17
@fefe, if that is a solution (using only one table) then you could skip the `ajax.reload()` idea and use jQuery ajax instead, and in that build the list of `columns` dynamiccally before you (re)initialise the table ... – davidkonrad Dec 05 '17 at 00:07

score 2 · Answer 3 · answered Dec 05 '17 at 10:00

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

score 1 · Answer 4 · answered Dec 01 '17 at 09:57

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,
  });

}

score 0 · Answer 5 · answered Nov 29 '17 at 18:22

You could try a simple workaround and reload the page, and pass a flag or something in the query string that you check on load of the page to tell it which data table you want to load.

By reloading the page you'll be resetting the DOM and essentially destroying whichever table was previously loaded.

For example:

$(document).ready( function {

var flag = getUrlVars()["flag"];

if(flag != 1) {

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

} else {

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

}

}


function getUrlVars()
{
    var vars = [], hash;
    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
        hash = hashes[i].split('=');
        vars.push(hash[0]);
        vars[hash[0]] = hash[1];
    }
    return vars;
}

score 0 · Answer 6 · answered Dec 05 '17 at 09:51

according to this : https://datatables.net/reference/api/ajax.reload() ajax.reload() it just for reloading the datas of the datatable from a remote stream, not reloading the datatable itself

I think you have to do something like this:

if($('#mode').is(':checked')) {

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

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



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

score 0 · Answer 7 · answered Dec 05 '17 at 11:55

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

var Table1 = $('#timesheet-table').DataTable({
    ajax: "data.json";
})
var Table2 = $('#timesheet-table-2').DataTable({
    ajax: "data.json";
})

You need to provide ajax url in order to use table.ajax.reload() method

Destroy and recreate a jQuery Datatables

7 Answers7