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

Bonar

Whats the Table1 and Table2 objects? JS variables that reference the tables i assume? – Baudin

I made an update on post – Bonar

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...? – Peralta

by default I initialise Table1 than I give an id to the second on checked #timesheet-table-2 – Bonar

@Bonar can you try this: jsbin.com/ququfutufi/edit?html,output – Octennial

Answer 1

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.

Podite

yeas but on each table I have different columns – Bonar

columns: json.columns will let you change columns as defined. I was expecting something like this. see this: datatables.net/forums/discussion/30947/… – Podite

so far the solution is seems to be the right one, but I'm not able to change the columns – Bonar

@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 ... – Medan

Answer 2

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.

Albritton

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. – Tswana

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

Bezoar

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

}

Trainbearer

Answer 5

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

Genniegennifer

Answer 6

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

Beneath

Answer 7

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

Uptotheminute