Storing getElementById results in DataTables

guillochon

Hi, in some of my search functions I use getElementById to retrieve some search boxes, but this is expensive especially when it is called in every row. I want to collect these search boxes into datatables using oInit, like so:

var idObj = meta.settings.oInit.searchFields['name'];

Doing this works great:

    var table = jQuery('#example').DataTable( {
        searchFields: {
            "name": document.getElementById("name"),
            "host": document.getElementById("host"),
            "claimedtype": document.getElementById("claimedtype")
        },

...but it means I have to type all of the column names one by one into searchFields. I tried making a function that generates a similar dictionary from a list of strings:

    function getSearchFields(document) {
        var searchFields = {};
        var alen = allSearchCols.length;
        for (i = 0; i < alen; i++) {
            var col = allSearchCols[i];
            objID = document.getElementById(col);
            console.log(objID);
            searchFields[col] = document.getElementById(col);
        }
        return searchFields;
    }
    var table = jQuery('#example').DataTable( {
        searchFields: getSearchFields(document),

...but getElementById fails to find anything when called within the function.

Any idea what's going on here? Why is doing it the first way working, but not the second way?