I want to show data in a pop-up using data-tables. I am building pop-up on click event and when I get success response from AJAX Request then I want to show that data in data-tables format(pagination, search, export).
Here is my AJAX success Code –
success: (response) => {
if ($.fn.DataTable.isDataTable('#dataTable2')) {
$('#dataTable2').DataTable().destroy();
}
$('#dataTable2 tbody').empty();
$('#dataTable2').DataTable({
dom: '<"datatable-header"lBfrtip>',
lengthMenu: [
[10, 25, 50, -1],
[10, 25, 50, "All"]
],
buttons: [{
extend: 'collection',
text: 'Export',
buttons: ['copy', 'csv', 'print']
}],
initComplete: function() {
$('.dt-buttons').css({
'position': 'absolute',
'top': '15px',
'right': '100px'
});
}
});
document.getElementById('lightbox').style.display = 'block';
$('#dataTable2').addClass('js-dataTable');
$('#dataTable2').html(response);
$('#lightbox').show();
}
HTML code –
<div id="lightbox">
<div id="lightbox-content">
<span class="close" onclick="closeLightbox()">×</span>
<div class="row mt-4">
<div class="col-md-12 table-container">
<table id="dataTable2" class="table table-hover table-striped no-footer" aria-describedby="dataTable_info">
</table>
</div>
</div>
</div>
</div>
Error –
Uncaught TypeError: Cannot read properties of undefined (reading 'aDataSort')
at _fnSortFlatten (backend.js?id=45e6969aba26e99cc456499f7b307f41:193000:35)
at _fnSortingClasses (backend.js?id=45e6969aba26e99cc456499f7b307f41:193338:13)
at loadedInit (backend.js?id=45e6969aba26e99cc456499f7b307f41:188170:4)
at HTMLTableElement.<anonymous> (backend.js?id=45e6969aba26e99cc456499f7b307f41:188269:4)
at Function.each (backend.js?id=45e6969aba26e99cc456499f7b307f41:127655:19)
at jQuery.fn.init.each (backend.js?id=45e6969aba26e99cc456499f7b307f41:127477:17)
at jQuery.fn.init.DataTable [as dataTable] (backend.js?id=45e6969aba26e99cc456499f7b307f41:187821:7)
at $.fn.DataTable (backend.js?id=45e6969aba26e99cc456499f7b307f41:202685:17)