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;）！

JQuery datatables 给表格添加加载中效果相关推荐

[转]jquery的ajax交付时“加载中”提示的处理方法
本文转自:http://www.educity.cn/wenda/77121.html jquery的ajax提交时"加载中"提示的处理方法方法1:使用ajaxStart ...
记录--Vue自定义指令实现加载中效果v-load（不使用Vue.extend）
这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助网站效果演示:ashuai.work:8888/#/myLoad GitHub仓库地址代码:github.com/shuirongshu- ...
android圆形点击效果,Android 三种方式实现自定义圆形页面加载中效果的进度条
[实例简介] Android 三种方式实现自定义圆形页面加载中效果的进度条 [实例截图] [核心代码] ad376a86-a9aa-49bc-8cea-321bcff2c0c3 └── AnimRou ...
JQuery插件：遮罩+数据加载中。。。（特点：遮你想遮，罩你想罩）
在很多项目中都会涉及到数据加载.数据加载有时可能会是2-3秒,为了给一个友好的提示,一般都会给一个[数据加载中...]的提示.今天就做了一个这样的提示框. 先去jQuery官网看看怎么写jQuery插 ...
js 添加遮罩层（加载中效果）
1. 添加遮罩层 this.mask = document.createElement('div');this.mask.style.width = window.innerWidth + 'px'; ...
layui -- loading实现加载中效果
1.layer.msg layer.msg('Loading...', {icon: 16, shade: 0.01, time: 5000 }); 2.弹出遮罩层显示加载中 var loading ...
datatables增删改查php,jQuery+datatables插件实现Ajax加载数据与增删改查功能示例_白峰_前端开发者...
本文实例讲述了这里给大家分享一下我在项目中用datatables实现ajax加载数据与增删改查注意,需要引入  搜索  新增  编辑  删除职业姓名性别爱好 //点击查找 $(" ...
html如何添加加载动画效果,CSS3创建加载动画效果
加载动画在网页设计中是很常见的.用户们都希望网页加载又快又流畅而不是盯着屏幕苦等,而加载动画能够在内容加载完成前给用户视觉反馈,从而能够吸引用户而不让他们直接放弃继续浏览你的网站. 创建加载效果所需的 ...
微信小程序组件实现加载中效果
大家好哇,我是梦辛工作室的灵,我又来了=-=,最近项目开发中,需实现一个加载效果,上图给大家看下: 感觉一般把,还是挺好写的,我就封装成了一个组件,方便大家以后使用,使用方法如下: <loadi ...

JQuery datatables 给表格添加加载中效果

JQuery datatables 给表格添加加载中效果相关推荐

最新文章

热门文章