The code I'm about to show you works as intended. My question is whether there is a way to improve the code by: (a) not needing to new up a table when I search it dynamically, and (b) whether there are ways I can reduce repeating myself with the code in common between the two tables.
What I mean by "newing up a table" is is initializing a table countsTable.DataTable({})
and when dynamically searching it, having to writevar table1 = countsTable.DataTable()
and apply the search commands on table1
. For one, I'm having to come up with a new naming scheme for each table when applying dynamic operations.
Here is the code in question.
// Data Table initialization
countsTable.DataTable({
dom: "lBfiprt",
buttons: ["excelHtml5", "print"],
saveState: true,
paging: false,
createdRow: function(row, data, dataIndex) {
$(row).addClass(data[1]);
}
});
actionTakenPercentsTable.DataTable({
dom: "lBfiprt",
buttons: ["excelHtml5", "print"],
saveState: true,
paging: false,
createdRow: function(row, data, dataIndex) {
$(row).addClass(data[1]);
}
});
I have some buttons on the page that allow the user to search the table for those specific values.
var table1 = countsTable.DataTable();
var exactCampus = "^" + campus + "$";
var exactCategory = "^" + category + "$";
var exactActionTaken = "^" + actionTaken + "$";
table1.column(0).search(schoolYear);
campus !== "All" ? table1.column(1)
.search(exactCampus, true, false) :
table1.column(1).search("");
category !== "All" ? table1.column(2)
.search(exactCategory, true, false) :
table1.column(2).search("");
actionTaken !== "All" ? table1.column(3)
.search(exactActionTaken, true, false) :
table1.column(3).search("");
table1.draw();
var table2 = actionTakenPercentsTable.DataTable();
table2.column(0).search(schoolYear);
campus !== "All" ? table2.column(1)
.search(exactCampus, true, false) :
table2.column(1).search("");
category !== "All" ? table2.column(2)
.search(exactCategory, true, false) :
table2.column(2).search("");
table2.draw();