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>