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样式中，添加如下设定加载中的位置在屏幕中间（因为dat atables默认的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;）！