It there a better way to dynamically search a table than newing another one?

rdm

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();

rdm

Figured out I can repeat less code by using a configuration parameter. I tested it out and it appears to work without bugs.

// Data Table initialization
var dataTableConfig = {
    dom: "lBfiprt",
    buttons: ["excelHtml5", "print"],
    saveState: true,
    paging: false,
    createdRow: function (row, data, dataIndex) {
        $(row).addClass(data[1]);
    }
};

countsTable.DataTable(dataTableConfig);
actionTakenPercentsTable.DataTable(dataTableConfig);

The remaining question is whether I can search these tables without needing to use a second variable.

countsTable.DataTable(dataTableConfig);

and then

var table1 = countsTable.DataTable();
// ...search

kthorngren

I can search these tables without needing to use a second variable.

Not sure I understand your question but you could do this:

var table1 = countsTable.DataTable(dataTableConfig);

Kevin

rdm

@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:

campus !== "All" ? 
     countsTable.column(1).search(exactCampus, true, false) : 
    countsTable.column(1).search("");

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..

kthorngren

Seems like countsTable is actually a variable containing a jQuery selector. Something like var countsTable = ("#myTable"). Is that correct?

Kevin

rdm

Yes.

kthorngren

When you use var table1 = countsTable.DataTable() or var table1 = countsTable.DataTable(dataTableConfig); then the variable table1 will contain an API instance of that Datatable which is needed for searching, etc. Where countsTable does not because it contains a selector value and can't be used to execute the APIs.

Kevin

rdm

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.

kthorngren

Maybe you are looking for something like this?

var countsTable = $("#CountsTable").DataTable(dataTableConfig);

Then use countsTable.search("search text").draw();.

Kevin

rdm

Thanks @kthorngren -- this did the trick.