Skip to content

Instantly share code, notes, and snippets.

@RaduW

RaduW/DataTable Reload.md

Last active July 26, 2018 02:55
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save RaduW/8684858 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
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);
@hnscdg
Copy link
Copy Markdown

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