Processing message is not displaying

Processing message is not displaying

nrraonrrao Posts: 1Questions: 1Answers: 0
edited August 2023 in Free community support
var datatableInstance;
function DataTable(TableID, Config, userRole) {
    var selectid;
    var spanid;
    var ddtext;
    if (Config == "1") {
        datatableInstance = $('#' + TableID).DataTable(
            {
        
                "pageLength": 50,
                "paging": true,
                "ordering": false,
                "info": true,
                "searchable": true,
                "filter": true,
                "scrollCollapse": true,
                "orderCellsTop": true,
                "fixedHeader": true,
                "fnInitComplete": function() {

                    // Enable THEAD scroll bars
                    $('.dataTables_scrollHead').css('overflow', 'auto');

                    // Sync THEAD scrolling with TBODY
                    $('.dataTables_scrollHead').on('scroll', function() {
                        $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft());
                    });

                    
                },
                "createdRow": function(row, data, index) {
                    $('.savebutton').prop('disabled', true);
                },
                //fixedColumns: {
                //leftColumns: 4
                //},
                "scrollX": true,
                "dom": 'Bfrtip',
                "oLanguage": { "sSearch": "Search all columns:", "sEmptyTable": "There is no data." },

                "buttons": [{
                    "extend": 'csv',
                    "filename": 'G ' + d.toDateString(),
                    "title": '',
                    exportOptions: {
                        columns: [2, 3, 6, 8, 10, 12, 14, 16, 18, 20, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 38, 40, 41, 42, 43],
                    }
                },
                /*{
                    "extend": 'pdf',
                    "filename": 'G ' + d.toDateString(),
                    "title": '',
                    exportOptions: {
                        columns: [2, 3, 6, 8, 10, 12, 14, 16, 18, 20, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 38, 40, 41, 42, 43],
                    
                    }
                },

                {
                    "extend": 'print',
                    "filename": 'GR ' + d.toDateString(),
                    "title": '',
                    exportOptions: {
                        columns: [2, 3, 6, 8, 10, 12, 14, 16, 18, 20, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 38, 40, 41, 42, 43],
                        
                    }
                },*/
                {
                    "extend": 'copy',
                    "filename": ' Report ' + d.toDateString(),
                    "title": '',
                    exportOptions: {
                        columns: [2, 3, 6, 8, 10, 12, 14, 16, 18, 20, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 38, 40, 41, 42, 43],

                    }
                },
                {
                    "extend": 'excel',
                    "filename": 'Report ' + d.toDateString(),
                    "title": '',
                    exportOptions: {
                        columns: [2, 3, 6, 8, 10, 12, 14, 16, 18, 20, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 38, 40, 41, 42, 43],

                    }
                }],
                "processing": true, // Enable processing message
        "language": {
            "processing": "<div id='processingMessage'>Processing...</div>" // Custom processing message
        },


                "columnDefs": [{
                    "className": 'details-control',
                    "orderable": false,
                    "data": null,
                    "defaultContent": '',
                    targets: 0
                },

                { "name": "action", targets: 01, visible: false },
                { "name": "fName", targets: 02, visible: false },
                { targets: 03, visible: false },
                { targets: 06, visible: false },
                { targets: 08, visible: false },
                { targets: 09, visible: false },
                { targets: 10, visible: false },
                { targets: 11, visible: false },
                { targets: 12, visible: false },
                { targets: 14, visible: false },
                { targets: 15, visible: false },
                { targets: 16, visible: false },
                { targets: 17, visible: false },
                { targets: 18, visible: false },
                { targets: 20, visible: false },
                { targets: 22, visible: false },
                { targets: 23, visible: false },
                { targets: 24, visible: false },
                { targets: 25, visible: false },
                { targets: 26, visible: false },
                { targets: 27, visible: false },
                { targets: 28, visible: false },
                { targets: 29, visible: false },
                { targets: 30, visible: false },
                { targets: 31, visible: false },
                { targets: 32, visible: false },
                { targets: 33, visible: false },
                { targets: 34, visible: false },
                { targets: 35, visible: false },
                { targets: 36, visible: false },
                { targets: 37, visible: false },
                { targets: 38, visible: false },
                { targets: 39, visible: false },
                { targets: 40, visible: false },
                { targets: 41, visible: false },
                { targets: 42, visible: false },
                { targets: 43, visible: false },
                { targets: 44, visible: false },
                { targets: 45, visible: false },
                { targets: 46, visible: false },
                { targets: 47, visible: false }
                ]
            });
            
    
        console.log("Alert1");
        
        $('.dataTables_wrapper').css('overflow-x', 'scroll');
        $('.savebutton').prop('disabled', true);

        /* Formatting function for row details - modify as you need */
        function format(d) {
            var tb = $('<table cellpadding="5" class="" cellspacing="0" border="0" width="50%" style="padding-left:250px;"/>')
                .addClass('loading')
                .text('Loading...');
            console.log(d[6]);
            console.log(d[46]);
            console.log(d[25]);
            $.ajax({
                url: getDashBoardData,
                data: {
                    tuid: d[6],
                    user: d[46],
                    //gradTerm:d[25]
                },
                dataType: 'json',
                success: function(json) {

                    console.log(json);
                    //let dashData = JSON.parse(json);
                    console.log(json[0].CAMP_CODE);

                    tb
                        .html('<table>' +


                            '<tr>' +
                            '<td>PA:</td>' +
                            '<td>' + json[0].C + '</td>' +
                            '<td>Hours Earned:</td>' +
                            '<td>' + json[0].HO + '</td>' +
                            '</tr>' +

                            '<tr>' +
                            '<td>Sel:</td>' +
                            '<td>' + json[0].SL + '</td>' +
                            '<td>tion:</td>' +
                            '<td>' + json[0].CA + '</td>' +
                            '</tr>' +

                            '<tr>' +
                            '<td>Grad APP:</td>' +
                            '<td>' + json[0].APP + '</td>' +
                            '<td>Run Time:</td>' +
                            '<td>' + json[0].RUNTIME + '</td>' +
                            '</tr>' +


                            '<tr>' +
                            '<td>Current Term:</td>' +
                            '<td>' + json[0].TERM + '</td>' +
                            '<td> Crns:</td>' +
                            '<td>' + json[0].CRNS + '</td>' +
                            '</tr>' +

                            '<tr>' +
                            '<td>Gr Crns:</td>' +
                            '<td>' + json[0].GR_CRNS + '</td>' +
                            '<td>Pending:</td>' +
                            '<td>' + json[0].PENDING + '</td>' +
                            '</tr>' +

                            '<tr>' +
                            '<td>Future Courses:</td>' +
                            '<td>' + '-' + '</td>' +
                            '<td>Current Term Courses:</td>' +
                            '<td>' + json[0].CURRENT_TERM + '</td>' +
                            '</tr>' +

                            '<tr>' +
                            '<td>Less Than C Minus:</td>' +
                            '<td>' + json[0].LESS_THAN_C_MINUS + '</td>' +
                            '<td>Curr Reg Cr Hrs:</td>' +
                            '<td>' + json[0].CURRENT_REG_CRHRS + '</td>' +
                            '</tr>' +

                            '<tr>' +
                            '<td>MG Reported:</td>' +
                            '<td>' + json[0].MG_REPORTED + '</td>' +
                            '<td>Incomplete Reported:</td>' +
                            '<td>' + json[0].INCOMPL_REPORTED + '</td>' +
                            '</tr>' +

                            '<tr>' +
                            '<td>Expected Earned Cr Hrs:</td>' +
                            '<td>' + json[0].EXPECTED_EARNED_CRHRS + '</td>' +
                            '<td>Earned Plus Expected Earned Hrs:</td>' +
                            '<td>' + json[0].EARNED_PLUS_EXPECTED_EARNED_HRS + '</td>' +
                            '</tr>' +
                            '<tr>' +
                            '<td>Dars Link:</td>' +
                            '<td>' + json[0].CAMP_CODE + '</td>' +
                            '<td>Other Curriculum:</td>' +
                            '<td>' + d[46] + '</td>' +
                            '</tr>' +
                            '</table>')
                        .removeClass('loading');


                }
            });
            return tb;

        }
        // Add event listener for opening and closing details
        $('.DataTable_Table  tbody').on('click', 'td.details-control', function() {
            var table = $('#tbl_grad_students').DataTable();
            var tr = $(this).closest('tr');
            var row = datatableInstance.row(tr);
            console.log("row" + row);
            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
                var hidadvisor = "#hid_adv_" + row.data()[42];
                //insertTrackingAppSection(row.data()[42], "Child Record Viewed.",$(hidadvisor).val());
            }
        });

        $('#tbl_grad_students  tbody').on('click', 'td.button-control', function() {

            console.log("Save button");
            var tr = $(this).closest('tr');
            var row = datatableInstance.row(tr);
        });



    }
}

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Answers

  • colincolin Posts: 15,237Questions: 1Answers: 2,599

    It's because processing only applies when server-side queries are made, please see this comment in the docs:

    Enable or disable the display of a 'processing' indicator when the table is being processed (e.g. a sort) for server-side processing.

    Allan explains in this thread (though note search applies also to load):

    with client-side processing the search is actually performed synchronously so there is no processing indicator. For the sort it is async if the user clicks to sort. It is synchronous for the order() method!

    With server-side processing it is always async for every action so it will always appear.

    You could add your own message/indicator before initialising the table, then removing it in initComplete,

    Colin

Sign In or Register to comment.