Ability to create an overlay over entire table while ajax processing is in progress.

stevecookms

I am currently using this to load a processing message while the table is fetching data. I want it to look like a modal popup does and just show the message, with a greyed out background over the entire datatable element.

function loadAsyncTable(tableId, url, columns, orderColumnIndex, ascDesc, initialPageLength) {
    //$('#' + tableId).DataTable().destroy();
    $('#' + tableId).DataTable({
        "proccessing": true,
        "serverSide": true,
        "processing": true,
        "ajax": {
            "url": url,
            "type": "post",
            "global": false,
            "dataSrc": "data"
        },
        "lengthMenu": [[25, 50, 75, 100, -1], [25, 50, 75, 100, "All"]],
        "pageLength": initialPageLength,
        "language": {
            "search": "Filter:",
            "loadingRecords": "Please wait - loading...",
            "processing": '<i class="fa fa-spinner fa-spin fa-3x fa-fw"></i><span class="sr-only">Loading...</span> '
        },
        "columns": columns,
        "order": [[orderColumnIndex, ascDesc]]
    });
}

kthorngren

This thread has some options. You can find others on the forum.

Kevin

stevecookms

Hmm I'm actually already doing both of those already.

I have the processing turned on, and I also have the global ajax overlay that goes over the entire screen.

I'm looking to just cover the datatable table element and not the entire screen

kthorngren

Looks like you can define the element that [Busy Load)(https://piccard21.github.io/busy-load/) applies to. You can use the preXHR event to show the loader and xhr to hide it. You can apply it to any element list the table tag. Or if you want to overlay the Datatable elements like search and paging you can apply it to the wrapper div which has the id of example_wrapper where example is the id of your table. See this example:
http://live.datatables.net/lufuraji/1/edit

Kevin