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‘>&#xe6df;</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‘>&#xe6e2;</i></a>&nbsp;&nbsp;";
　　　　　　　　str +="<a href=‘javascript:;‘ class=‘btn btn-primary radius btn-upload‘><i class=‘Hui-iconfont‘>&#xe613;</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‘>&#xe642;</i>上传</a>";
　　　　　　　　return str;
　　　　　　}
　　　　},
　　　]
　　});
}

</script>

原文：https://www.cnblogs.com/littleapple/p/10790610.html