How do I redraw a table using an already-built array?
How do I redraw a table using an already-built array?
I need to redraw my datatable using an array function I've already built. I am manipulating the demo datatable content for the dt_basic datatable.
What it does naturally: When a user types a search term in the search filter, the search filter removes any rows that do not match the search variable and only shows rows which match it.
What I need it to do: I need it to pull the relevant rows to the top of the table and continue to display all the other rows beneath.
To this end, I have written an array function shown below.
My question: How do I now tell the table to redraw using my array variable rather than just console logging it?
Special note about the function: One of my columns has a select dropdown status field, but all the others are just regular alpha-numeric cells. I've written in logic to ask the search to ignore the dropdown options.
$('#dt_basic_filter input[type="search"]').on("keyup change", function () {
var returnArray = [];
var value = $(this).val();
var dTable = $('#dt_basic').dataTable();
var tableData = dTable.fnGetData();
var wasFound = false;
$.each(tableData, function (key, row) {
wasFound = false;
$.each(row, function (k, v) {
if ($($.parseHTML(v)).find(".selected-status").length > 0) {
//if there is a selected status and the value is the search term, log it.
//doesn't include dropdown values
var statusText = $($.parseHTML(v)).find(".selected-status").text();
if (statusText.toLowerCase().indexOf(value.toLowerCase()) > -1) {
returnArray.splice(0, 0, row);
wasFound = true;
return;
}
} else {
//not in a column with drop down and we match the search term
if ((v).toLowerCase().indexOf(value.toLowerCase()) > -1) {
returnArray.splice(0, 0, row);
wasFound = true;
return;
}
}
});
if (!wasFound) {
returnArray.push(row);
}
});
console.log(returnArray);
});