I have added custom component in datatable.
Here is custom component:
Here is js code:
function customizeSeeteleDatatable()
{
//Removed default search box
$('#seeteledatatable_filter').remove();
$(".row").find(".col-md-6").removeClass("col-md-6");
const search_component = '<div class="customize-tan-search" style="display:flex; width:100%; margin-bottom:10px;"><select class="form-control search_tan1"><option value="">Select Attribute</option></select><input type="text" placeholder="Search data" class="form-control search_tan1_value">'
+ '<select class="form-control search_tan2"><option value="">Select Attribute</option></select><input type="text" placeholder="Search data" class="form-control search_tan2_value">'
+ '<select class="form-control search_tan3"><option value="">Select Attribute</option></select><input type="text" placeholder="Search data" class="form-control search_tan3_value">'
+ '<button class="btn btn--dark tansearch" style="margin-left:10px; line-height:0;">Search</button><button class="btn btn--dark cleartansearch" disabled style="line-height: 0">Clear</button></div>'
$('#seeteledatatable_length').append(search_component);
$('#seeteledatatable_length').css({'display': 'flex'});
$('select[name="seeteledatatable_length"]').css('width', '60px');
$('#seeteledatatable_length *').css({ 'font-size': '12px', 'height': '25px' });
$('.tansearch, .cleartansearch').css({ 'padding': '12px' });
$('.search_tan1, .search_tan2, .search_tan3').css({'padding': '0', 'margin-left':'5px', 'margin-right':'2px'})
const export_button = '<div class="col-md-4" style="text-align: center; align-self:center"><button class="btn btn--dark tanexport" disabled>Export Data</button></div>'
$('#seeteledatatable_wrapper').children().eq(2).children().eq(0).removeClass('col-md-5').addClass('col-md-3');
$('#seeteledatatable_wrapper').children().eq(2).children().eq(1).removeClass('col-md-7').addClass('col-md-5');
$('#seeteledatatable_wrapper').children().eq(2).children().eq(0).after(export_button);
getFromIndexedDbSession("ctc_tan_data").then((data) => {
if (data) {
const tanDataHeader = Object.keys(data[1][0]['tan_data'][0]);
for (let i = 0; i < tanDataHeader.length; i++)
$('.search_tan1, .search_tan2, .search_tan3').append('<option value="' + tanDataHeader[i] + '">' + tanDataHeader[i] + '</option>');
if(tan_data_search)
{
var data = cloneObject(datatable_data['ctc_tan_data_page_search'])
var payload = data[0]
$('.search_tan1').val(payload.attribute1);
$('.search_tan1_value').val(payload.attribute1_value);
$('.search_tan2').val(payload.attribute2);
$('.search_tan2_value').val(payload.attribute2_value);
$('.search_tan3').val(payload.attribute3);
$('.search_tan3_value').val(payload.attribute3_value);
$('.cleartansearch').prop('disabled', false);
}
$('.loaderimage').hide();
}
else
{
$('.loaderimage').hide();
}
});
}
function seeteledata_render(data) {
var tanDataHead = ''
var tanRowData = ''
$('#seeteledatatable').DataTable().destroy();
$('#deploymentiddetail').DataTable().destroy();
if (!data || !data[0]['tan_data'].length) {
$('#tandataheader').empty();
var tanDataHead = "<table><tr><td>No Data</td></tr></table>";
var cleanedTag = purifyDOM(tanDataHead);
$('#tandataheader').html(cleanedTag);
$('#tanrowdata').empty();
var tanRowData = "<table><tr><td>No Data</td></tr></table>";
cleanedTag = purifyDOM(tanRowData);
$('#tanrowdata').html(cleanedTag);
$('#seeteledatatable').DataTable({ "searching": false });
customizeSeeteleDatatable();
return;
}
const tanDataHeader = Object.keys(data[0]['tan_data'][0]);
for (var head = 0; head < tanDataHeader.length; head++) {
tanDataHead += '<th style="width: 10%">' + tanDataHeader[head] + '</th>'
}
$('#tandataheader').empty()
tanDataHead = "<table><tr>" + tanDataHead + "</tr></table>"
var cleaned_tag = purifyDOM(tanDataHead)
$('#tandataheader').html(cleaned_tag)
$.each(data[0]['tan_data'], function (index, element) {
var rowElements = ''
var rowStart = '<tr>'
var rowElements = "<td>" + "Data" + "</td>";
var rowEnd = '</tr>'
tanRowData += rowStart + rowElements + rowEnd
});
$('#tanrowdata').empty()
tanRowData = "<table>" + tanRowData + "</table>"
var cleaned_tag = purifyDOM(tanRowData)
$('#tanrowdata').html(cleaned_tag)
$('#seeteledatatable').DataTable({
"lengthMenu": [10, 20, 50, 100],
"pageLength": 10,
"initComplete": function (settings, json) {
$("#seeteledatatable").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
},
"oLanguage": {
"sInfo": "Showing _START_ to _END_ entries",
"sLengthMenu": "Show _MENU_"
},
});
customizeSeeteleDatatable();
}
$(document).on('click', '.pagination a', async function(event) {
data = [];
seeteledata_render(data);
});
Here is problem:
I have to destroy table and reinitiate table on every page number click because i am using backend pagination that calls an API on every page number click. And data rendered in custom component is static and comes from Indexeddb. Due to more data that should render in custom component, its taking more time when i click on new page number.
How can i preserve custom component when i use $('#seeteledatatable').DataTable().destroy(); so that its dont re-render every time i click on new page number ?
how can i solve this problem??.