using datatable on the same page with dynamic data
using datatable on the same page with dynamic data
The report page I'm using fetches data through an api/ajax call from the server. I have a text box to collect input from the user which triggers the ajax call that renders the data from the server and the data is presented in a datatable. every time the query is made, the page is not reloaded but only the table. I'm using a plugin for column filter which is called using the "initcomplete" function while defining the datatable (as per the example I found for the plugin). I notice that the initcomplete is called only the first time the page is loaded and not everytime the after executing an ajax query. So the column filter text still contains the previous search for that column. Is there a way to reset the column search value or call this part of the code (that's inside initcomplete) everytime I get new data?
$("#table").DataTable({
retrieve: true,
orderCellsTop: true,
fixedHeader: true,
paging: false,
destroy: true,
fixedColumns: {
left: 4,
},
dom: "Bfrtip", //for data export
//stateSave: true,
buttons: [
//for data export
$.extend(true, {}, buttonCommon, {
extend: "copyHtml5",
}),
$.extend(true, {}, buttonCommon, {
extend: "excelHtml5",
}),
$.extend(true, {}, buttonCommon, {
extend: "pdfHtml5",
}),
//"colvis", //provide the column visibility selector dropdown
{
extend: "colvis",
//postfixButtons: ["colvisRestore"],
collectionLayout: "fixed columns",
collectionTitle: "Column visibility control",
},
],
columnDefs: [
{
targets: -1,
visible: false,
},
],
initComplete: function () {
console.log("here");
var api = this.api();
// For each column
api
.columns()
.eq(0)
.each(function (colIdx) {
// Set the header cell to contain the input element
var cell = $(".filters th").eq(
$(api.column(colIdx).header()).index()
);
var title = $(cell).text();
console.log(title + colIdx);
$(cell).html(
'<input type="text" placeholder="' + title + '" />'
);
// On every keypress in this input
$(
"input",
$(".filters th").eq($(api.column(colIdx).header()).index())
)
.off("keyup change")
.on("keyup change", function (e) {
e.stopPropagation();
// Get the search value
$(this).attr("title", $(this).val());
var regexr = "({search})";
$(this).parents("th").find("select").val();
var cursorPosition = this.selectionStart;
// Search the column for that value
api
.column(colIdx)
.search(
this.value != ""
? regexr.replace(
"{search}",
"(((" + this.value + ")))"
)
: "",
this.value != "",
this.value == ""
)
.draw();
$(this)
.focus()[0]
.setSelectionRange(cursorPosition, cursorPosition);
});
});
},
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Answers
You haven't said how the data is reloaded, that's the important part. If you're doing it, programmatically, could you just move that
initComplete
to the same code? If you're using Ajax, you could trigger the code on thexhr
perhaps,Colin
You can reset the column filter search by calling the table using column search = '' in a function like this:
$("#mytable tfoot input").on( 'keyup change', function () {
var idx = $(this).parent().index();
table.column( idx+':visible').search( '').draw();
} );
or in another event using idx = zero based nth-column number.
For Global search this may help:
$("#dt-search-0").val(''); //0= first table on page
$("#mytable").DataTable().search('').draw();