JQuery datatables 給表格新增載入中效果

JQuery datatables 中如果有很多資料的話，載入就會很慢，這時候就需要使用載入中的效果，而datatables是提供了載入中的屬性的：processing，載入中的style樣式也是可以自己決定：（你可以只用文字，或者加一個gif的圖片），記得開啟："bProcessing" : true,參考如下如下內容：

    if (typeof(datatables_options) == "undefined") {//為了複用datatables物件
                    datatables_options = {
                            "aLengthMenu" : [ [ 10, 20, 50, 100, -1 ],
                                    [ 10, 20, 50, 100, "All" ] ],
                            "iDisplayLength" : 10,
                            //"draw": 3,
                            "sDom": 'T<"clear">rt<"float_left"i><"float_right_nexpage"p><"float_right_display"l>',
                            //"sDom" : "<r>t<'float_left'i><'float_right_nexpage'p><'float_right_display'l>>",
                            // 第一列禁止排序,因為這是核取方塊,不需要排序
                            "bSort" : false,
                            "bAutoWidth": false,
                            "bProcessing" : true,//必須加上這個才能顯示載入中的效果
                            "bServerSide" : true,
                            "bDestroy" : true,
                            //"responsive": true,
                            "bJQueryUI" : false,
                            "sScrollX" : "100%",
                            "language" : oLanguageData,
                            "aoColumns" : aoColumnsData,
                            "sAjaxSource" : "ceshi',
                            "fnServerData" : function(sSource, aoData,
                                    fnCallback) {

                                $.ajax({
                                    "type" : 'post',
                                    "async":false,//如果為false的話，只有火狐才能顯示效果，改為true全部都可以顯示
                                    "url" : sSource,
                                    "dataType" : "json",
                                    "data" : aoData,
                                    "success" : function(resp) {
                                        fnCallback(resp);
                                    },
                                    error : function(XMLHttpRequest,
                                            textStatus, errorThrown) {
                                        alert("網站開小差了,請稍後重試!");
                                    }
                                });
                            },
                            "fixedColumns":   {
                              "iLeftColumns" : 5,
                              "sHeightMatch" : "auto"
                            },
                        };

                        wageNowTable = $('#sample_1') .on( 'processing.dt', function ( e, settings, processing ) {
                            $('#sample_1_processing').css( 'color', processing ? 'red' : 'red' );//設定處理中的文字樣式為紅色
                            $('#sample_1_processing').css( 'display', processing ? 'block' : 'none' );//當資料載入完隱藏掉文字
                        } ).dataTable(datatables_options);
        var oLanguageData = {
        "sProcessing" : "<img src='./media/image/ajax-loading.gif'>",//這裡很重要，如果你的載入中是文字，則直接寫上文字即可，如果是gif的圖片，使用img標籤就可以載入
        "sLengthMenu" : "顯示 _MENU_ 項結果",
        "sZeroRecords" : "沒有匹配結果",
        "sInfo" : "顯示第 _START_ 至 _END_ 項結果，共 _TOTAL_ 項",
        "sInfoEmpty" : "顯示第 0 至 0 項結果，共 0 項",
        "sInfoFiltered" : "(由 _MAX_ 項結果過濾)",
        "sInfoPostFix" : "",
        "sSearch" : "搜尋:",
        "sUrl" : "",
        "sEmptyTable" : "表中資料為空",
        "sLoadingRecords" : "載入中...",
        "sInfoThousands" : ",",
        "oPaginate" : {
            "sFirst" : "首頁",
            "sPrevious" : "上頁",
            "sNext" : "下頁",
            "sLast" : "末頁"
        },
        "oAria" : {
            "sSortAscending" : ": 以升序排列此列",
            "sSortDescending" : ": 以降序排列此列"
        }
    };

2.在你的jsp引用的全域性css樣式中，新增如下設定載入中的位置在螢幕中間（因為datatables預設的processing載入效果是在表格的左上角，則不太好看，參考如下內容：

引用的載入中的css樣式網址為：https://github.com/DataTables/Plugins/issues/41，內容為：

       /*設定正在載入中的居中顯示*/
    .dataTables_wrapper .dataTables_processing {
        position: absolute;
        top: 50%;
        left: 50%;
        backgroundColor : '#000';
        border : 'none';
        padding : '2px';
        width: 100%;
        height: 40px;
        margin-left: -50%;
        text-align: center;
        font-size: 1.2em;
        cursor : 'wait';
        z-index: 1;//這個屬性一定要加上，否則載入中是在表格的底部，會顯示不全，具體的解釋參考網址：http://www.w3school.com.cn/jsref/prop_style_zindex.asp

    } 

3.預設的左上角的載入中效果：

居中的載入中的顯示效果如下（ajax-loading.gif這個是載入中的圖片，你可以替換成自己的圖片）：

3.上述的載入中效果，很奇怪的是，在火狐是可以的，但是在百度瀏覽器和谷歌瀏覽器都不會顯示的，後來發現是ajax請求的async為false就只有火狐能夠執行，改為true之後，百度瀏覽器、谷歌瀏覽器、360、IE瀏覽器都可以了（這估計是個坑，原因以後再找，我覺得應該是火狐的處理機制不同導致的）：參考如下解釋：

async為false後ajax同步請求，回掛起其後面的js程式碼執行指導ajax返回結果後繼續執行
不配置預設為true為非同步，非同步不會掛起ajax的執行，會繼續執行後續的程式碼，js程式碼的執行速度比你ajax返回返回資料快多了，所以ajax沒返回就已經執行return dataarr;這句導致success回撥沒執行填充dataarr陣列。

你增加alert會掛起return dataarr;的執行，但是不會阻止ajax的返回和success的執行，此時ajax相當於是另外的一個執行緒填充了dataarr，點你點選alert的彈框確定時間間隔足夠ajax返回返回資料填充dataarr了，所以確定後執行return dataarr;時已經有資料了，除非網路很繁忙ajax未返回

附註：HTML DOM zIndex 屬性的解釋：

zIndex 屬性設定元素的堆疊順序。
該屬性設定一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離使用者更近，為負數則表示離使用者更遠。
語法：

Object.style.zIndex=auto|number

可能的值
值 描述
auto 預設。堆疊順序與父元素相等。
number 設定元素的堆疊順序。
提示和註釋
註釋：元素可擁有負的 z-index 屬性值。
註釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！