Replace Processing with a Full page modal

yoshidahiro

I am trying to replace the Processing message with a bootstrap modal, the reason is some queries take 10 -15 seconds when querying 250 + records

any ideas?
here is my code below

var SiteCode = '';
    oTable = $("#searchDetailsTable").dataTable({
        "lengthMenu": [[10, 25, 50, 100, 250, 500, 1000], [10, 25, 50, 100, 250, 500, 1000]],
        "destroy": true,
        //"bStateSave": true,
        "scrollX": true,
        "sPaginationType": "full_numbers",
        "bProcessing": true,
        "bServerSide": true,
        "order": [[1, "asc"]],
        "fnServerParams": serverParams,
        "bFilter": false,
        "bLengthChange": true,
        "iDisplayLength": 10,
        "iFullNumbersShowPages": 5,
        "aaSorting": [],
        //"bAutoWidth": false,
        "sAjaxSource": root + "Cables/GetAllSearchedCables",
        "aoColumns": [
           {
 
               "mDataProp": "SiteName",
               "bSortable": true,
               "sClass": "text-center",
               "mRender": function (data, type, full) {
                   dashnum = data;
                   CAGE = full.CAGE;
                   drawnumber = full.DrawingNumber;
                   SiteCode = full.CableSiteCode;
                   var temp = '<span style="font-size: 11px">' + data + '</span>';

                   return temp;
               }
           },
             {
              
                 "mDataProp": "RunListTitle",
                 "bSortable": true,
                 "sClass": "text-center",
                 "mRender": function (data, type, full) {

                     dashnum = data;
                     var temp = '<span style="font-size: 11px">' + full.RunListTitle + '</span>';
                     return temp;
                 }
             },
            {
                //"width": "30px",
                "mDataProp": "Dash_Num",
                "bSortable": true,
                "sClass": "text-center",
                "mRender": function (data, type, full) {

                    dashnum = data;
                    var temp = '<span style="font-size: 11px">' + full.Dash_Num + '</span>';
                    return temp;
                }
            },
            {
                //"width": "30px",
                "mDataProp": "Status_Desc",
                "bSortable": true,
                "sClass": "text-center",
                "mRender": function (data, type, full) {
 
                    var tempDesc = full.Status_Desc;
                    if (tempDesc.match("Inactive")) {
                        tempDesc = "Inactive";
                        color2Use = 'inactiveTextColor';
                    };

                    return '<span class=\"' + color2Use + '\" style=\"font-size: 11px\">' + tempDesc + '</span>';
                }
            },
            {
                //"width": "60px",
                "mDataProp": "Fabrication_No",
                "sClass": "text-center",
                "bSortable": true,
                "mRender": function (data, type, full) {

                    var temp = '<span style="font-size: 11px">' + full.Fabrication_No + '</span>';
                    return temp;
                }
            },
            {
                //"width": "50px",
                "mDataProp": "Notes",
                "sClass": "text-center",
                "bSortable": true,
                "mRender": function (data, type, full) {
                    if (isNullOrWhiteSpace(full.Notes)) {
                        full.Notes = '';
                    }
                    var temp = '<span style="font-size: 11px">' + full.Notes + '</span>';
                    return temp;
                }
            },
            {
                //"width":"2000px",
                "mDataProp": "CableDetails",
                "bSortable": false,
                "bSearchable": false,
                "render": function (data, full) {

                    var cabledetail = JSON.parse(data);
                    var htmlTable = "<table border=\"0\" cellpadding=\"0\" cellspacing=\"3\">";
                    var markercount = 0;
                    cabledetail.forEach(function (arrayItemz) {
                        if (arrayItemz.Type === 'Marker') {
                            markercount += 1;
                        }
                    });
                    var count = 0;
                    var lengthCount = 0;
                    cabledetail.forEach(function (arrayItem) {
                        switch (arrayItem.Type) {
 
                                break;

                            case "Marker":
                                count++;
 
                                break;
                            case "Routing":

 );
                                break;
                        }
 
                    });
                    htmlTable += "</table>";

 
                    return htmlTable;
                }
            }
        ],
        "fnInitComplete": function (oSettings, json) {
            $("#loading").hide();
 
            $('#searchButton > i').removeClass('fa fa-spin').removeClass('fa fa-spinner').addClass('fa fa-search');
        },
        "fnDrawCallback": function (oSettings) {
 
            $('#searchButton > i').removeClass('fa fa-spin').removeClass('fa fa-spinner').addClass('fa fa-search');
        },
        "fnRowCallback": function (nRow, aData, iDisplayIndex) {
            nRow.id = aData.Dash_Num;
 
            $('#searchButton > i').removeClass('fa fa-spin').removeClass('fa fa-spinner').addClass('fa fa-search');
            return nRow;
        }
    });

allan

Listen for the processing event to know when to show / hide the Bootstrap modal.

Regards,
Allan