jquery 中dataTable显示加载中,图片或文字
引入js文件
<script type="text/javascript" src="${basePath}/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
配合加载中图片一起,下面这个是设置加载图片的位置为居中显示
<style type="text/css">
/*设置正在加载中的居中显示*/
.dataTables_wrapper .dataTables_processing {
position: absolute;
top: 30%;
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;}
</style>
<script type="text/javascript">
inittable();
//初始页面
function inittable(){
table = $('#cckj_datatable').dataTable({
/*定义表格重绘时的操作,重绘时修改你想修改的内容*/
"drawCallback": function( settings ) {
document.getElementById("showNum").innerText=""; //控制某个控件的显示内容
$("input[id='tit_chk']").prop('checked',false); //修改id为tit_chk的checkbox的选中状态为不选中
},
"info":true,
"searching":false,
//"aLengthMenu":[5,10,20,30,40,50], //用户可自选每页展示数量 5条或10条
"lengthChange":true,
"serverSide":true,
"pageLength": 10,
"bProcessing":true, //是否显示 处理中.......
"sPaginationType": "full_numbers",
"pagingType": "input",
"oLanguage" : {
"sProcessing" : "<img src='${basePath }/static/attach/images/loading.gif'>", //如果不需要用加载中图片显示,这句话可以不要
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉, 没有找到",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"sZeroRecords": "没有检索到数据",
"sSearch": "名称:",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
}
},
"ajax":{
"url":"${basePath}/res/pic/lstJson",
"type":"POST",
"data": function ( d ) {
return $.extend( {}, d, {
"param1": $('#name').val(),
"param2": $('#sex').val(),
} );
}
},
"columns":[
{"data":"cId",
"className":"td-manage text-c","orderable":false,
"render":function(data, type, full, meta){
var str = "";
str +="<input type='checkbox' value='"+data+"' name='checkboxspan' id='box_"+data+"' onchange='getCheckedNum()'>";
return str;
}
},
{"data":"seq","orderable":false,"className":"text-c td-manage"},
{"data":"resPath","orderable":false,"className":"text-c td-manage",
"render":function(data,type,full,meta){
var str="";
str +="<div class='picbox li'><a href='javascript:;' onclick=\"picture_show('查看图片','${basePath}/res/pic/show?resPath="+data+"&ip="+full.ip+"&micode="+full.micode+"','500','550')\">"
if(full.thumbnailStr!=null){
str +="<img src='data:image/gif;base64,"+full.thumbnailStr+"' alt='Base64 encoded image' width='40' height='30'/>";
}else{
str +="无";
}
str +="</a></div>";
return str;
}
},
{"data":"name","orderable":false,"className":"text-c td-manage",
"render":function(data,type,full,meta){
var str="";
if(data==""||data==null){
str +=full.nickname;
}else{
str +=data;
}
return str;
}
},
{"data":"tagstr","orderable":false,"className":"text-c td-manage"},
{"data":"createTime","orderable":false,"className":"text-c td-manage",
"render":function(data, type, full, meta){
var str = "";
var time = getMyDateTime(data);
str += time;
return str;
}
},
{"data":"createUser","orderable":false,"className":"text-c td-manage"},
{"data":"enableStatus","orderable":false,"className":"text-c td-manage",
"render":function(data, type, full, meta){
var str = "";
if(data==1){
str += "<input class='switch switch-anim' onchange=\"object_modifyStatus(this,'"+full.rId+"','"+full.cId+"','"+data+"')\" type='checkbox' checked />";
}else{
str += "<input class='switch switch-anim' onchange=\"object_modifyStatus(this,'"+full.rId+"','"+full.cId+"','"+data+"')\" type='checkbox'/>";
}
return str;
}
},
{"data":"cId", "className":"td-manage text-c","orderable":false,
"render":function(data, type, full, meta){
var str = "";
str +="<a title='修改' href='javascript:;' onclick=\"mechanismId_edit('修改','${basePath}/res/pic/edit?id="+data+"&rId="+full.rId+"','850','600')\" class='btn btn-warning radius' style='margin-left:10px;'>";
str +="<i class='Hui-iconfont'></i></a>";
str +="<a title='删除' href='javascript:;' onclick=\"object_del("+data+",'"+full.rId+"')\" class='btn btn-danger radius' style='margin-left:10px;'>";
str +="<i class='Hui-iconfont'></i></a> ";
str +="<a href='javascript:;' class='btn btn-primary radius btn-upload'><i class='Hui-iconfont'></i> 浏览文件";
str +="<input type='file' name='file_pic_"+data+"' id='file_pic_"+data+"' class='input-file'></a>";
str +="<a title='上传' href='javascript:;' onclick=\"object_upload("+data+",'"+full.rId+"')\" class='btn btn-warning radius' style='margin-left:10px;'>";
str +="<i class='Hui-iconfont'></i>上传</a>";
return str;
}
},
]
});
}
</script>
jquery 中dataTable显示加载中,图片或文字的更多相关文章
- Javascript在ajax提交过程中页面显示加载中,请等待效果,并在提交过程中限制确定按钮防止多次提交,提交完成后,解除提交限制
加载中,请等待div: <div id="load" class="center-in-center" style="display:none; ...
- Android开发中如何解决加载大图片时内存溢出的问题
Android开发中如何解决加载大图片时内存溢出的问题 在Android开发过程中,我们经常会遇到加载的图片过大导致内存溢出的问题,其实类似这样的问题已经屡见不鲜了,下面将一些好的解决方案分享给 ...
- WPF防止界面卡死并显示加载中效果
原文:WPF防止界面卡死并显示加载中效果 网上貌似没有完整的WPF正在加载的例子,所以自己写了一个,希望能帮到有需要的同学 前台: <Window x:Class="WpfApplic ...
- 微信小程序 在使用wx.request时显示加载中
微信小程序中,向后台请求数据是,通常想给用户提示正在加载中,如下图: 我们可以用wx.showLoading(OBJECT),当请求服务器的地方多了,怎么才能不每次都要去调用函数,我们只要对wx.re ...
- jquery mobile 请求数据方法执行时显示加载中提示框
在jquery mobile开发中,经常需要调用ajax方法,异步获取数据,如果异步获取数据方法由于网速等等的原因,会有一个反应时间,如果能在点击按钮后数据处理期间,给一个正在加载的提示,客户体验会更 ...
- Navicat操作数据库时一直显示加载中
用Navicat for mysql操作mysql数据库,其中一个表怎么也打不开,一直加载,还不能关闭.从网上搜索原因,主要是以下几个原因:原因一:表死锁,会出现这样的情况,锁不释放,无论多久都读取不 ...
- WP 图片加载时显示加载中
private BitmapImage srcimage = new BitmapImage(); public MainPage() { InitializeComponent(); progres ...
- 关于Unity3D中Resources动态加载NGUI图片的方法
在NGUI中有些图片我需要动态进行变更或者加载,怎么办? 首先在项目中创建一个Resources目录,接着把需要的图片放在这里面,可以有子文件夹么?当然可以,文件结构很重要哦~ NGUI加载图片的方法 ...
- 打包项目成war包并部署到服务器上,项目运行一直显示加载中
查看服务器上的Tomcat路径下的log 显示 org.apache.catalina.LifecycleException: Failed to initialize component [Conn ...
随机推荐
- Python【每日一问】08
问:请解释一下装饰器的本质.功能 答: 1.装饰器的本质:闭包函数 2.装饰器的功能:在不改变函数本体结构.调用方法的情况下,给函数添加额外的功能 3.装饰器的实现方式 装饰器的实现方式一般是: de ...
- springmvc功能以及源码实现分析
每当我学习一个新技术时,我总是会问自己这个技术有哪些功能,能帮我解决哪些问题. 但是当我在网上进行搜索时,答案并不让我满意. 在使用springmvc很久以后,我将在这篇文章里对springmvc功能 ...
- hive 中间会话临时文件自动清理脚本
hive在运行过程中,我们经常会发现 hdfs /tmp/hive/hive or hdfs 目录占用空间巨大,我这里已经清理过了所以,相对较小.但是初次使用hive的用户,一定会发现 随着时间的推移 ...
- 升级openssl 操作记录
openssl 是一群黑客最爱研究搞怪的一个软件为啥,据说openssl是一群数学家编写的一套算法 哈哈 好,说正事 openssl 经常发布补丁包,因为升级是避免不了的 步骤: 查看当前openss ...
- java 异步查询转同步多种实现方式:循环等待,CountDownLatch,Spring EventListener,超时处理和空循环性能优化
异步转同步 业务需求 有些接口查询反馈结果是异步返回的,无法立刻获取查询结果. 正常处理逻辑 触发异步操作,然后传递一个唯一标识. 等到异步结果返回,根据传入的唯一标识,匹配此次结果. 如何转换为同步 ...
- 分组密码算法AES-128,192,256 C语言实现第一版
AES的C语言实现入门版 AES分组密码算法中明文分组位128bits,密钥分组可以为128,192,256bits.AES也是由最基本的变换单位——“轮”多次迭代而成的.我们将 AES 中的轮变换计 ...
- 侧脸生成正脸概论与精析(一)Global and Local Perception GAN
侧脸生成正脸我一直很感兴趣,老早就想把这块理一理的.今天来给大家分享一篇去年的老文章,如果有不对的地方,请斧正. Beyond Face Rotation: Global and Local Perc ...
- python学习笔记----正则表达式
正则: regular expression 常用的场景: #正则的包 >>> import re #match:开头匹配,匹配到,返回一个匹配对象,否则返回None >> ...
- SQL SERVER 死锁
sp_lock 查看锁表名称 select request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableNamefr ...
- zabbix通过agent添加监控项的步骤
1.确定要监控的对象的指标 2.在agent端上,把如何具体获取指标写成shell脚本,并放在一个和其它agent端统一的位置上 3.在agent端上,自定义监控项key值,配置zabbix_agen ...