Skip to content

Instantly share code, notes, and snippets.

@RaduW

RaduW/DataTable Reload.md

Last active July 26, 2018 02:55
Show Gist options
  • Save RaduW/8684858 to your computer and use it in GitHub Desktop.
Save RaduW/8684858 to your computer and use it in GitHub Desktop.
Download ZIP
Testing dataTables reloading ( I need to completely change the structure, content and also columns).
Raw
DataTable Reload.md

Datatables reloading

( changing the content and the column structure).

Unfortunately I couldn't find a way to do it in one go. There is the table.fnDestroy(true); but this removes the <table> element from the page as well. We could use this but then we need to wrap the table element in a div in order to have a place where to recreate the table.

It seem easyer to:

    table.fnClearTable();           // clear all the rows ( not really necessary since we call empty() at the end)
    table.fnDestroy();              // remove table enhancements
    $('#theTable').empty()          // empty the table content ( this remove the rows)
    table = $('#theTable').dataTable(config);   // recreate the table with the new configuration

See it running at live example

Raw
jsbin.oFawEgIm.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Test DataTable" />
<link href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<div>
<button id='clean'>clean</button>
</div>
<body>
<table id='theTable'></table>
</body>
</html>
Raw
jsbin.oFawEgIm.js
function onReady()
{
"use strict";
var config = {
"aaData": [
/* Reduced data set */
[ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
[ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
[ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
[ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
[ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
[ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
[ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
[ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
[ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ],
[ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ],
[ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
],
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{ "sTitle": "Grade", "sClass": "center" }
]
};
var table = $('#theTable').dataTable(config);
table.fnClearTable();
table.fnDestroy();
$('#theTable').empty()
table = $('#theTable').dataTable(config);
}
$(document).ready(onReady);
@carltondickson
Copy link

Thanks for sharing

@nickbork
Copy link

Beware of using fnClearTable to destroy the table! If you are using server-side processing calling this method before calling fnDestroy forces the table to go fetch new data from the server and then re-creating the table invokes a second call to the server to fetch data, resulting in double calls.

@bcsbcs109
Copy link

I am not able to use table.fnClearTable(); table.fnDestroy(); $('#theTable').empty()

I am required to use the refreshing of datatable as when i use blank text box in search then all data should be displayed

@hnscdg
Copy link

hnscdg commented Jul 26, 2018

Thanks, it works

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment