JQuery datatables 給表格新增載入中效果
阿新 • • 發佈:2019-01-06
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;)!