DataTables

DataTables Examples

HTML

<link rel="stylesheet" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">
<script src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
select province <select id="province-list">
    <option value="sp">sp</option>
    <option value="np">np</option>    
</select>    

<br><br>
 
<table id="example">
    <tbody></tbody>
</table>

JavaScript

var sp = [
    { 'col1' : 'col1', 'col2' : 'col2' },
    { 'col1' : 'col11', 'col2' : 'col22' }    
];
var np = [
    { 'col1' : 'col1', 'col2' : 'col2', 'col3' : 'col3', 'col4' : 'col4' },
    { 'col1' : 'col11', 'col2' : 'col22', 'col3' : 'col33', 'col4' : 'col44' }
];

var spColumns = [
    { mData : "col1",  sTitle : "column1" },
    { mData : "col2",  sTitle : "column2" }
];

var npColumns = [
    { mData : "col1",  sTitle : "column1" },
    { mData : "col2",  sTitle : "column2" },
    { mData : "col3",  sTitle : "column3" },
    { mData : "col4",  sTitle : "column4" }      
];
    
var dataTable,
    domTable, 
    htmlTable = '<table id="example"><tbody></tbody></table>';

function initDataTable(province) {
    if ($.fn.DataTable.fnIsDataTable(domTable)) {
        dataTable.fnDestroy(true);
        $('body').append(htmlTable);
    } 
    var data = (province=='sp') ? sp : np;
    var columns = (province=='sp') ? spColumns : npColumns;    
    dataTable = $("#example").dataTable({
        bDestroy : true,
        bProcessing : false,
        aaData : data,
        aoColumns : columns
    });        
    domTable = document.getElementById('example');
}

initDataTable('sp');

$('#province-list').change(function() {
    var prov = $(this).val();
    initDataTable(prov);
});