Radu Woinaroski RaduW

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.

Here's an example of how to embed a Gist on GitHub Pages:

{% gist 5555251 %}

All you need to do is copy and paste the Gist's ID from the URL (here 5555251), and add it to a gist tag surrounded by {% and %}.

	<!DOCTYPE html>
	<html>
	<head>
	<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.min.js"></script>
	<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">

	<meta name="description" content="Master Detail DataTables" />
	<meta charset=utf-8 />
	<title>Master Detail Data Tables</title>

	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery.min.js"></script>
	<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
	<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
	<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.min.js"></script>
	<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">

	<html lang="en">
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body {
	margin: 0;
	text-align: center;
	}
	.Child {
	background-color: purple;

	// Use Gists to store code you would like to remember later on
	console.log(window); // log the "window" object to the console