Hide/Show columns datatables columns? based on javascript variable value.

latinunit

All of the examples I've seen online only hide columns when clicking on an event, I need to hide/show programatically, based on an javascript variable, for this reason, I also need to be able to tag which columns belong to a specific scenario, in my case, I am categorizing my columns by setting classes to the column, but is there an alternative way?

I've tagged my columns with classes

{
"data": "addressee",
"className": 'addressee _type both email postal',
"orderable": false,
render: function(data, type, row, meta) {
return '<input class="form-control addressee" id="addressee' + meta.row + '" name="addressee" type="text" value = "' + data + '" >';
}
},

And this is how it they are rendered

<th class="address _type both postal" aria-label="Address">Address</th>
<th class="postcode _type both postal" aria-label="Postcode">Postcode</th>
<th class="email _type both email " aria-label="Email">Email</th>
<th class="firstName _type both email postal" aria-label="First Name">First Name</th>

Then this is my function to hide/display based on the class the column belongs to and comparing it with my javascript variable. the issue here is that the columns are first displayed on pageload then hidden, and looks well ugly and slow.

    /*columns hide/display*/
    if (_inviteFormat = 'Email') {
        const elArray = [];

    $("._type").each((index, element) => { //loop inside collection
        const classes = $(element).attr("class").split(" "); //get all class names in class array

        if (classes.indexOf("email") === -1) {
            const e = $(element).attr("class").split(" ")[0]; //1st class name in array list                 
            elArray.push('.' + e); //push to array irrelevant column names

            //console.log("Removing irrelevant classes: ",elArraySort(elArray));

        }
        table.columns(elArraySort(elArray)).visible(false);
    });

    function elArraySort(classes) {
        var result = [];
        $.each(classes, function(i, e) {
            if ($.inArray(e, result) == -1) result.push(e);
        });
        return result.filter(function(e) {
            return e
        });
    }

} //end

allan

0Looks like a duplicate of this thread.

Allan

latinunit

Hi Allan, thanks, i couldnt reply on the other post so I created this one could you please delete it and copy the answer over here, the css selector works, however, the columns appear during rendering momentarily, is there a way to stop this?

allan

Reposting:

The easiest option might be to use a class selector for the columns:

if (_inviteFormat === 'Email') {
  table.columns(':not(.email)')visible(false);
}

Allan

allan

however, the columns appear during rendering momentarily, is there a way to stop this?

The only way would be to put the DataTable into a hidden element. What you are seeing is a FOUC (Flash Of Unstyled / Unscripted Content). The browser will attempt to display the HTML as fast as possible, which will typically be before the Javascript kicks in.

Allan