Processing message not showing up when first initialized

ManOrMonster

DataTables is set to show the processing message, but it won't show it upon first initialization while waiting for the JSON data (just says "Loading..."). It does show up whenever getting new data.

if (typeof(table) === 'object') {
            table.clear();
          //Get new data            
          table.ajax.url("/cfc/userAdmin.cfc?method=displayGroups&upn=" + upn).load();
        } else {
            table = $("#groupList").DataTable({
                "iDisplayLength": 12,
                "ajax": {
                       "url": "/cfc/userAdmin.cfc?method=displayGroups&upn=" + upn,
                       "dataSrc": 'DATA'
                   },
                "processing": true,
                "order": [0, 'asc'],
                "dom": 'difrtp',
                "language": {
                    "processing": "<i id='processingIcon' class='fa fa-cog fa-spin fa-2x'></i>",
                    "search": "<label for='filterField' class='sr-only'>Filter results</label>",
                    searchPlaceholder: "Filter groups",
                    "emptyTable": "No groups found"
                }
            });
            // If I don't do this, users with few groups will not have their tables initialized?!?!!!
            table.ajax.reload();
        }

How can I make it appear the first time as well?

ManOrMonster

OK, so I commented out this line (line 23): table.ajax.reload(); and it did show the processing icon upon initialization. However, as noted in the comment above it, if I'm loading little data from the AJAX request, the table does not initialize without using that line. If there's more data, it initializes just fine. So that's not really an option. Any solution to either of these issues would fix both,

jr42.gordon

Check the z-index of '.dataTables_processing'. I had to do the following to get mine to show:

.dataTables_processing {
    z-index: 3000;
}

Your issue may be totally unrelated but worth a shot.

ManOrMonster

Yes, it's unrelated. I did already try that, plus it only doesn't show up the first time.

praveena

check with initcomplete

jr42.gordon

What if you re-arranged your code to following

if (typeof(table) !== 'object') {
            table = $("#groupList").DataTable({
                "iDisplayLength": 12,
                "ajax": {
                       "url": "/cfc/userAdmin.cfc?method=displayGroups&upn=" + upn,
                       "dataSrc": 'DATA'
                   },
                "processing": true,
                "order": [0, 'asc'],
                "dom": 'difrtp',
                "language": {
                    "processing": "<i id='processingIcon' class='fa fa-cog fa-spin fa-2x'></i>",
                    "search": "<label for='filterField' class='sr-only'>Filter results</label>",
                    searchPlaceholder: "Filter groups",
                    "emptyTable": "No groups found"
                }
            });
}

     table.clear();
     table.ajax.reload();