how to destroy and reinitialize the datatable
how to destroy and reinitialize the datatable
SriRishitha
Posts: 42Questions: 4Answers: 0
i created a datatable dynamically like this
var table = $('#equictntbl').DataTable({
retrieve: true,
columns: cols,
ServerSide: true,
dom: 'Bfrtip',
buttons: [
{
extend: 'print',
title: 'Report ',
//text: '<i class="fa fa-print"></i> Print',
//title: $('h1').text(),
exportOptions: {
//columns: ':not(.no-print)'
columns: ':visible', stripNewlines: true
},
orientation: 'landscape',
pageSize: 'C2',
footer: false
},
{
extend: 'excelHtml5', title: 'Report', footer: true, exportOptions: {
columns: ':visible', stripNewlines: false
},
orientation: 'landscape',
pageSize: 'LEGAL',
},
{
extend: 'pdfHtml5', title: 'Report',
columns: ':visible',
orientation: 'landscape',
pageSize: 'C2',
text: '<i class="fa fa-file-pdf-o"> PDF</i>',
footer: false
},
{
extend: 'colvis',
columnText: function (dt, idx, title) {
return (idx + 1) + ': ' + title;
},
postfixButtons: ['colvisRestore']
},
{
extend: 'pageLength', footer: false, exportOptions: {
stripNewlines: false
}
},
],
iDisplayLength: 25,
lengthMenu: [[10, 25, 50, -1],
['10', '25', '50', ' all']
],
pagingType: "full_numbers",
deferRender: true,
});
table.rows.add(resp).draw();
debugger
}
else if (resp.length == 0) {
debugger
toastr.error("No data found");
$('#reportdiv').hide();
}
else {
debugger
$('#reportdiv').hide();
toastr.error("Please fill all the details");
}
}
});
if ($.fn.DataTable.isDataTable('#viewtbl')) {
$('#equictntbl').dataTable().fnClearTable();
$('#equictntbl').dataTable().fnDestroy();
}
Replies
Use .DataTable() (with a capital D) and then you can use functions like
clearanddestroySee the first FAQ - https://datatables.net/faqs/index#Most-common-FAQs
$('#equictntbl').DataTable().clear();
$('#equictntbl').DataTable().destroy();
i write like this but my table not reloading with new columns data.
discussion closed
//Destroy the old Datatable
$('#equictntbl').DataTable().clear().destroy();
//Create new Datatable
$('#m_device_table').DataTable({...})
Ref
I'm using DataTables 1.10 and did a clear before destroying the Datatables but when I'd want to reinitialize the table again I but I get in the console output of the browser the following:
```TypeError: h is undefined
Hi @badbyte,
It's working as expected here. Can you modify that test case to demonstrate the problem, please.
Cheers,
Colin
Good night. I wanted to know if the code above will print child rows without clicking on the drop down button to show the child rows.
@dt_user - your question seems to have no relevance to this thread. I suggest you start a thread of your own.
I found that the sequence is very important.
var tableId = "#myTable";
// clear first
if(tableObj!=null){
tableObj.clear();
tableObj.destroy();
}
//2nd empty html
$(tableId + " tbody").empty();
$(tableId + " thead").empty();
//3rd reCreate Datatable object
tableObj= $(tableId).DataTable({
...
});
@sooli86 - thank you - the "2nd empty html" code is indeed important prior to re-initializing the table.
Cheers.
I'm doing something very similar to what you're doing in the snippet you provided. I have responsive: true and when I resize the browser window to be narrow like a mobile device, the responsiveness kicks in as expected. However, If I go through the lifecycle of where I clear and destroy the table and then initialize -- while in "mobile" view, the responsiveness is lost. Has anyone experienced this?
Take a look at this example. It states that
style="width:100%"should be applied to thetabletag directly so Datatatbles can use it to size the table. Try this instead of adding with.css().Kevin
Thanks Kevin,
I do have the width applied to the table:
<table id="EZAPOPTable" class="usa-table views-table views-view-table cols-8 sticky-enabled sticky-table"style="width:100%;"></table>Just to reiterate, If I load the table in desktop mode and then resize the browser window to Mobile width using the mouse, The columns are responsive as the last one is hidden and the green plus sign appears. However, when I refresh the screen while at the Mobile width, all of the columns appear in the dt thus violating responsiveness.
If I define the columns statically in the HTML, the dt works as expected, but I need to dynamically change the number and value of columns.
How are you refreshing the screen? Is this a refresh of the whole page or are you just refreshing the table data and re-initializing Datatables? Please provide more details of what you are doing.
Can you post a link to your page or a test case showing the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Hi Kevin,
Please load the following sample I created:
http://ubuntu2005.eastus.cloudapp.azure.com/programlistingPOC.html
To recreate the behavior, perform the following:
1. Load the url in the browser in desktop mode
2. Click on the "get data" button
3. After the data loads, resize the browser window horizontally until it's at it's narrowest
4. You should see the green plus circles which indicates that the page is responsive
5. Click the "get data" button again
6. The green plus circles will be gone and the page isn't responsive anymore
7. If you slightly resize the browser, then the page is responsive again
Any insight on how to resolve this will be appreciated.
Thanks
@dmeister Thanks for the test case. I used
$('#programs').DataTable().responsive.recalc();in the console after the second get data button and it adjusted the display. Try usingresponsive.recalc()aftertblPrograms.order([15, 'asc'],[0, 'asc']).draw();in your Ajax success function.Kevin
Hi Kevin,
Your suggestion did the trick! Thanks again for your help.
Daoud