Why can't DataTable get initialized properly in modal dialog
Why can't DataTable get initialized properly in modal dialog
I am working on an application built in ASP.NET Core MVC and It has few modal popups displayed with datatables inside. But when ever it opens any popup datatable is not getting initialized correctly. It looks like a plain html table with no search, sort, pagination etc. I am loading a partial view in modal dialog as popup and once it is loaded, I am trying to initialize datatable in modal's 'shown-bs-modal' event but its not working. Below is my datatable initialization code and settings. Please suggest if i am missing anything or doing anything wrong
url = url.replace("statusId", statusVal);
$('#PendingItemsModel').find('.modal-title text').text("Pending Items");
$('#PendingItemsModel').find('.modal-body').load(url);
$('#PendingItemsModel').modal('show');
}
}
$('#PendingItemsModel').on("shown.bs.modal", function () {
//alert('test');
$("#PendingItemsTable").DataTable({
responsive: true,
orderCellsTop: true,
fixedHeader: true,
autoWidth: true,
searchable: true,
orderable: true,
destroy: true,
deferRender: true,
scrollY: 400,
language: {
"zeroRecords": " "
},
//deferRender: true,
//scroller: true,
"aLengthMenu": [[10, 20, 30, -1], [10, 20, 30, "All"]],
iDisplayStart: 0,
order: [[0, "asc"]],
columnDefs: [
{ targets: [6], searchable: false, orderable: false }
]
}).draw();
Answers
Even same thing is happening in nav tab-pane tabs. Pls advise
Its hard to say without seeing the issue. Look at the browser's console for errors. Make sure the
table
tag has the IDPendingItemsTable
.If you still need help please post a link to your page or a test case replicating the issue so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin