<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" />
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
</head>
<body>
<h1>Jquery DataTables !</h1>
<select id='toDT'>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="audi">Audi</option>
</select>
<table id="example" ></table>
<script>
var table = "";
$(document).ready(function() {
$('#toDT').on('change', function() {
if ( $.fn.dataTable.isDataTable( '#example' ) ) {
table.destroy();
$('#example').empty();
if(this.value =="volvo")
{
var volvo = eval('[{"COLUMNS":[{ "title": "volvo"}, { "title": "Count"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]}]');
table= $('#example').DataTable({
"data": volvo[0].DATA,
"columns": volvo[0].COLUMNS,
paging: false,
searching: false
});
}
if(this.value =="saab")
{
var saab = eval('[{"COLUMNS":[{ "title": "saab"}, { "title": "Count"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]}]');
table = $('#example').DataTable({
"data": saab[0].DATA,
"columns": saab[0].COLUMNS,
paging: false,
searching: false
});
}
if(this.value =="audi")
{
var Audi = eval('[{"COLUMNS":[{ "title": "Audi"}, { "title": "Count"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]}]');
table = $('#example').DataTable({
"data": Audi[0].DATA,
"columns": Audi[0].COLUMNS,
paging: false,
searching: false
});
}
}
else {
$('#example').empty();
if(this.value =="volvo")
{
var volvo = eval('[{"COLUMNS":[{ "title": "volvo"}, { "title": "Count"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]}]');
table= $('#example').DataTable({
"data": volvo[0].DATA,
"columns": volvo[0].COLUMNS,
paging: false,
searching: false
});
}
if(this.value =="saab")
{
var saab = eval('[{"COLUMNS":[{ "title": "saab"}, { "title": "Count"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]}]');
table = $('#example').DataTable({
"data": saab[0].DATA,
"columns": saab[0].COLUMNS,
paging: false,
searching: false
});
}
if(this.value =="audi")
{
var Audi = eval('[{"COLUMNS":[{ "title": "Audi"}, { "title": "Count"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]}]');
table = $('#example').DataTable({
"data": Audi[0].DATA,
"columns": Audi[0].COLUMNS,
paging: false,
searching: false
});
}
}
});
var dataObject = eval('[{"COLUMNS":[{ "title": "Audi"}, { "title": "COUNTY"}],"DATA":[["John Doe","Fresno"],["Billy","Fresno"],["Tom","Kern"],["King Smith","Kings"]]}]');
var columns = [];
table = $('#example').DataTable({
"data": dataObject[0].DATA,
"columns": dataObject[0].COLUMNS,
paging: false,
searching: false
});
} );
</script>
</body>
</html>
// Code goes here
/* Styles go here */