Replace HTML Table with new one on select change

elimariaaa

Hello,

I've been a fan of DataTables and been using it for a while now especially in making reports.

Just a question. I'm trying to replace the whole HTML table on select change because I need to rename the headers and add a new column.

My default table is:

<table id="datatable-delivery_performance" class="table table-striped table-bordered forex-datatable">
<thead class="delivery_performance_head_tbl">
<tr>
<th class="first_column_head">Week Name</th>
<th>Average Delivery Days</th>
</tr>
</thead>
<tbody></tbody>
</table>

My DataTable:

delivery_performance_tbl = $('#datatable-delivery_performance').DataTable({
"dom": 'lf<"float-right"B>rtip',
"paging": false,
"ordering": false,
"info": false,
"searching": false,
"processing": true, //Feature control the processing indicator.
"serverSide": true, //Feature control DataTables' server-side processing mode.
"ordering": false,
"lengthMenu": [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]],
"pageLength": 100,
"order": [], //Initial no order.
"ajax": {
"url": window.base_url + "mgtcomm/ajax_delivery_performance",
"type": "POST",
data: function (data) {
data.filter_by = $('select#delivery_performance_filter_by').val();
data.second_filter = $('select#route_name_filter_by').val();
}
},
"buttons": [
{ "extend": 'excelHtml5', "text":'<i class="fa fa-file-excel-o" aria-hidden="true"></i>',"className": 'btn btn-success', "titleAttr": 'Export to Excel' },
{ "extend": 'pdfHtml5', "text":'<i class="fa fa-file-pdf-o" aria-hidden="true"></i>',"className": 'btn btn-primary', "titleAttr": 'Export to PDF' }
],
"language": {
"infoFiltered": ""
}
});

Then when I select an option in my dropdown, I do this(JS):

$('.delivery_perf_holder').html('<table id="datatable-delivery_performance" class="table table-striped table-bordered forex-datatable"><thead class="delivery_performance_head_tbl"><tr><th class="first_column_head">Week Name</th><th>Average Delivery Days for '+ second_filter_text +'</th><th>Average Delivery Days for All Routes</th></tr></thead><tbody></tbody></table>');
delivery_performance_tbl.destroy().draw().ajax.reload(null,false);

But it's not working. What am I doing wrong?

Your help is highly appreciated. Thanks!

-Eli

elimariaaa

Hello again!

Funny because I solved it my way.

I enclosed my DataTable code in a function and just call it whenever.

But if there's a 'DataTable' way, I'd like to use that instead. Thanks!