How to Get the columns that have visibility set to false

silentlynx

I have a unique situation that I've been stumped on for quite a while. Via an ajax call I'm loading a datatable element with data from my database. When I initialize the datatable, I have set some (20) of the columns visibility to false (there are 35 columns in this data set.) To allow a user to enable/disable columns dynamically, I have a drop down list of all available columns they can click on to enable/disable any of the complete set of columns. The issue I have is that I'm trying to show via a pair of font-awesome-classes which of the columns in the drop down list is hidden by default, and which are not. I can get it to either show all of them not visible or none of them visible at run time which is not accurate. Note all (...) suggests the code below was shrunk to adhere to the posting limitation. But hopefully I left enough of the code for anyone to visualize what I need done. By the way I am using datatables version 1.10.12

This is a sample of the dropdown list of the available columns

<ul id='dev-listing-cols' class="dropdown-menu" role="menu">
    <li><a id="dev-listing-col-00" class="toggle-vis" data-column="0"><i  id="dv00" class="fa fa-check-square-o"></i> Developer</a></li>
    <li><a id="dev-listing-col-01" class="toggle-vis" data-column="1"><i  id="dv01" class="fa fa-check-square-o"></i> Dev ID</a></li>
    <li><a id="dev-listing-col-02" class="toggle-vis" data-column="2"><i  id="dv02" class="fa fa-check-square-o"></i> Username</a></li>
    <li><a id="dev-listing-col-03" class="toggle-vis" data-column="3"><i  id="dv03" class="fa fa-check-square-o"></i> Gender</a></li>
    <li><a id="dev-listing-col-04" class="toggle-vis" data-column="4"><i  id="dv04" class="fa fa-check-square-o"></i> Company</a></li>
...
</ul>

This is my datatable

<table id="dev-listing" cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered table-hover nowrap" width="100%">
    <thead>
        <tr>
            <th>Developer</th>
            <th>Dev ID</th>
            <th>Username</th>
            <th>Gender</th>
            ...
        </tr>
    </thead>
</table>

Here I initialize the datatable

var developerTable = null; //centering of columns controlled by css
developerTable = $( '#dev-listing' ).DataTable({
    ajax: {
        url: "/helpers/admin.info.php?action=getDevListing",
        dataSrc: ""
    },
    columns: [
        { data: 'REALNAME', defaultContent: "" },
        { data: '_ID', defaultContent: "", visible: false },
        { data: 'USERNAME', defaultContent: "", visible: false },
        { data: 'GENDER', defaultContent: "" },
        { data: 'COMPANY', defaultContent: "", visible: false },
        {
            data: null,
            render: function ( data, type, row ) {
                return V2IndustryList[data.INDUSTRY];
            },
            defaultContent: ""
        },
        { data: 'PRIMARY_PHONE', defaultContent: "", visible: false },
        { data: 'EMAIL_ADDRESS', defaultContent: "", visible: false },
        { data: 'REGISTERED_AS', defaultContent: "", visible: false },
        { data: 'LAST_CREATED', defaultContent: "" },
        { data: 'SUBSCRIPTION', defaultContent: "" },
        { data: 'ADDRESS_1', defaultContent: "", visible: false },
        { data: 'ADDRESS_2', defaultContent: "", visible: false },
        { data: 'A_CITY', defaultContent: "", visible: false },
        { data: 'A_STATE', defaultContent: "", visible: false },
        { data: 'A_ZIP', defaultContent: "", visible: false },
        {
            data: null,
            render: function ( data, type, row ) {
                return BFHCountriesList[data.A_COUNTRY];
            },
            defaultContent: ""
        },
        { data: 'IP_LOC', defaultContent: "", visible: false },
        { data: 'ACC_STATUS', defaultContent: "" },
        { data: 'IS_ADMIN', defaultContent: "", visible: false },
        { data: 'REVIEWED_API', defaultContent: "" },
        { data: 'DEV_ENROLLMENTS', defaultContent: "" },
        { data: 'MAX_ENROLLMENTS', defaultContent: "", visible: false },
        { data: 'DEV_VERIFICATIONS', defaultContent: "" },
        { data: 'MAX_VERIFICATIONS', defaultContent: "", visible: false },
        {
            data: null,
            render: function( data, type, row ) {
                var dusage = data.DEV_DATA_USAGE;
                return ( dusage > 0 ) ? parseFloat( dusage/1024/1024, 10 ).toFixed(4) : 0;
            }
        },
        {
            data: null,
            render: function( data, type, row ) {
                var musage = data.MAX_DATA_USAGE;
                return ( musage > 0 ) ? parseFloat( musage/1024/1024, 10 ) : 0;
            },
            visible: false
        },
        { data: 'DEV_REQUESTS', defaultContent: "" },
        { data: 'MAX_REQUESTS', defaultContent: "", visible: false },
        { data: 'APPS_OWNED', defaultContent: "" },
        { data: 'COLLABORATING_ON', defaultContent: "" },
        { data: 'NUMBER_OF_COLLABS', defaultContent: "" },
        { data: 'LAST_CHANGE', defaultContent: "", visible: false },
        { data: 'LAST_CHANGED_BY', defaultContent: "", visible: false },
        { data: 'COMMENTS', defaultContent: "", visible: false }
    ],
    scrollX: true,
    fixedColumns: true,
    deferRender: true,
    order: [[ 9, 'desc' ]],
    scrollCollapse: true,
    searching: false,
    pageLength: 25,
    searching: true
});

Notice that only a handful of the columns above have visible set to false by default.

And this code block handles the show/hide functionality whenever a user clicks on any of the items in the drop down list

// Toggles Columns for data-table dev-listing
$( 'a.toggle-vis' ).on( 'click', function ( e ) {
    e.preventDefault();

    // Get the column API object
    var column = developerTable.column( $( this ).attr( 'data-column' ) );

    // Toggle the visibility
    column.visible( ! column.visible() );

    //toggles the font-awesome class depending on which column was clicked
    if( $( event.target ).is( '#dev-listing-col-00' ) || $( event.target ).is( '#dv00' ) ) $( '#dev-listing-col-00 #dv00' ).toggleClass( ' fa-square-o' );
    else if( $( event.target ).is( '#dev-listing-col-01' ) || $( event.target ).is( '#dv01' ) ) $( '#dev-listing-col-01 #dv01' ).toggleClass( ' fa-square-o' );
    else if( $( event.target ).is( '#dev-listing-col-02' ) || $( event.target ).is( '#dv02' ) ) $( '#dev-listing-col-02 #dv02' ).toggleClass( ' fa-square-o' );
    else if( $( event.target ).is( '#dev-listing-col-03' ) || $( event.target ).is( '#dv03' ) ) $( '#dev-listing-col-03 #dv03' ).toggleClass( ' fa-square-o' );
    else if( $( event.target ).is( '#dev-listing-col-04' ) || $( event.target ).is( '#dv04' ) ) $( '#dev-listing-col-04 #dv04' ).toggleClass( ' fa-square-o' );
...
} );

So essentially, the drop down list all have an check mark next to them at startup. How Can I determine which ones to show the fa-check-square-o class, and which one to show the fa-square-o at startup/runtime.

I have tried the following as an example, but when i look at any of the developerTable.column() values it always return false.

if( developerTable.column( 0 ).visible === false ) $( '#dev-listing-col-00 #dv00' ).toggleClass( ' fa-square-o' )
else if( developerTable.column( 1 ).visible === false ) $( '#dev-listing-col-01 #dv01' ).toggleClass( ' fa-square-o' )
else if( developerTable.column( 2 ).visible === false ) $( '#dev-listing-col-02 #dv02' ).toggleClass( ' fa-square-o' )
else if( developerTable.column( 3 ).visible === false ) $( '#dev-listing-col-03 #dv03' ).toggleClass( ' fa-square-o' )
else if( developerTable.column( 4 ).visible === false ) $( '#dev-listing-col-04 #dv04' ).toggleClass( ' fa-square-o' )

I'm wondering if this has something to do with the asynchronous nature of ajax, and whether I need to actually set the drop down list classes in a data tables return function. If that is the case, how would I do this as far as datatables is concerned. If not, can anyone give any pointers?

silentlynx

So since posting this, It dawned on me that I could get this done by adding the appropriate class at the time of initialization for each single column. Only difference is I'd have to set up all the columns like this:

                {
                    data: null,
                    render: function( data, type, row ) {
                        $( '#dev-listing-col-00 #dv00' ).addClass( ' fa-check-square-o' );
                        return data.REALNAME;
                    }
                },
                {
                    data: null,
                    render: function( data, type, row ) {
                        $( '#dev-listing-col-01 #dv01' ).addClass( ' fa-square-o' );
                        return data._ID;
                    },
                    visible: false
                },
                {
                    data: null,
                    render: function( data, type, row ) {
                        $( '#dev-listing-col-02 #dv02' ).addClass( ' fa-square-o' );
                        return data.USERNAME;
                    },
                    visible: false
                },
                {
                    data: null,
                    render: function( data, type, row ) {
                        $( '#dev-listing-col-03 #dv03' ).addClass( ' fa-check-square-o' );
                        return data.GENDER;
                    }
                },

Not really the best method though, as it would mean alot of editing if a column ever changes. Does anyone have any other ideas?

allan

That would work - yes! Another option would be to use column().visible() to get the state of each column (perhaps inside a columns().every() loop function) and set the state of the buttons after initialisation.

Allan

silentlynx

Thanks Allan. Will have a go at it.