It there a better way to dynamically search a table than newing another one?
It there a better way to dynamically search a table than newing another one?
rdm
Posts: 194Questions: 55Answers: 4
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();
This question has an accepted answers - jump to answer
Answers
Figured out I can repeat less code by using a configuration parameter. I tested it out and it appears to work without bugs.
The remaining question is whether I can search these tables without needing to use a second variable.
and then
Not sure I understand your question but you could do this:
Kevin
@kthorngren -- my point is that when I initialize the table, it exists with a variable
countsTable. That's the variable in use when the table displays on page load.To run searches -- triggered by user button clicks -- I need to create a whole new variable and new up the table
var table1 = countsTable.DataTable()rather than simply running the search like this:I tried it and I got "countsTable is not a function".
I was just hoping there was a way I could avoid having to come up with new variable names when doing searches on existing tables with pre-existing variabls..
Seems like
countsTableis actually a variable containing a jQuery selector. Something likevar countsTable = ("#myTable"). Is that correct?Kevin
Yes.
When you use
var table1 = countsTable.DataTable()orvar table1 = countsTable.DataTable(dataTableConfig);then the variabletable1will contain an API instance of that Datatable which is needed for searching, etc. WherecountsTabledoes not because it contains a selector value and can't be used to execute the APIs.Kevin
So the question becomes if there is a better alternative to
var countsTable = $("#CountsTable")Is there perhaps a Data Table configuration option for this scenario? I tried a search myself, but maybe I'm not using the correct search term. Searching https://datatables.net/manual/index for "Config" or "Configuration" are not turning up the search results I would hope to find -- a list of configuration options.
Maybe you are looking for something like this?
Then use
countsTable.search("search text").draw();.Kevin
Thanks @kthorngren -- this did the trick.