var queryUrl = "this mapper url";
var dataTableLanguage = {
"sLengthMenu": "每頁顯示 _MENU_ 條記錄",
"sZeroRecords": "抱歉, 沒有找到",
"sInfoEmpty": "沒有數據",
"sInfo": "顯示 _START_ 至 _END_ 條 共 _TOTAL_ 條",
"sInfoFiltered": "(從 _MAX_ 條數據中檢索)",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "上一頁",
"sNext": "下一頁",
"sLast": "尾頁"
},
"sZeroRecords": "沒有檢索到數據",
};
// 渲染表格
var tableObj = $(".table-sort").dataTable({
"searching": false, // 是否開啟默認的查詢條件輸入框
"serverSide": true, // 服務端分頁
"fnPageChange":"next", // 换页方法,可以跳转到指定页。可选参数有"first", "previous", "next" , "last",或者是一个整数,0是第一页
"bProcessing": true, // 当表格在处理的时候(比如排序操作)是否显示“处理中...”,默認false
"bPaginate": true, // 是否允许终端用户从一个选择列表中选择分页的页数
"aLengthMenu":[10,20,30,40,50,100], //每页显示的记录数,供用戶選擇
"bLengthChange": true, // 是否显示每页大小的下拉框
"bFilter": true, // 过滤功能
"bSort": true, // 排序功能
"aaSorting": [9,"desc"],// 設置初始化时默认一列来排序
"sPaginationType":"full_numbers", // 分頁組件的樣式,具體樣式參考 https://www.datatables.net/release-datatables/examples/basic_init/alt_pagination.html
"ajax":{
"url":queryUrl,// 請求的URL
"type":"post",
"data":function(data){ // 提交到後台的參數,內容很多,如要獲取所有,請直接return data就行了,具體請遍歷data對象或用瀏覽器F12網絡,參數中查看
var param = {};
var columnIndex = data["order"][0]["column"]; // 獲取鼠標點擊列名的下標
param.start = data["start"]; // 數據的開始位置
param.length = data["length"]; // 每頁顯示的數量
param.order = data["order"][0]["dir"]; // 排序規則 DESC或ASC
param.orderField = data["columns"][columnIndex]["data"]; // 根據下標獲取排序列名的名稱
param.search = data["search"]["value"]; // 搜索框的文本內容,searching如果不為true,則就是默認空串
param.mySearch = $("#search").val();
return param;
}
},
"fnDrawCallback": function (oSettings) {
var json=jQuery.parseJSON(oSettings.jqXHR.responseText);//获取后台方式 直接可以拿到json 之后进行处理
//console.log(json);//此处json就是返回的数据
$("#showspan").text(json.iTotalDisplayRecords);
},
"oLanguage": dataTableLanguage,// 界面显示文字,默认是英文
"aoColumns": [
{"data": "uid","sDefaultContent":"","bVisible":true,"bSortable":false,// uid後台返回的JSON對象的屬性名,sDefaultContent當後台數據為null時,顯示的默認值,bVisible前端是否顯示這個欄位,默認true,bSortable設置此列不參與排序操作
// 自定義渲染結果
"render":function (data, type, full, meta) {
return "<input type='checkbox' value='"+data+"' />";
}
},
{"data":"factoryArea","sDefaultContent":""},
{"data":"buildingName","sDefaultContent":""},
{"data":"buildingNumber","sDefaultContent":""},
{"data":"businessCluster","sDefaultContent":""},
{"data":"departmentCode","sDefaultContent":""},
{"data":"area","sDefaultContent":"","required":{required:true,number:true,min:0}},
{"data":"buildLegalpersonCode","sDefaultContent":""},
{"data":"buildLegalperson","sDefaultContent":""},
{"data":"dataTime","sDefaultContent":"","fillVisible":true},
{"data":"uid","sDefaultContent":"","bSortable":false,
"render":function (data, type, full, meta) {
return "<a style=\"text-decoration:none\" class=\"ml-5\" onClick=\"article_edit('编辑','../baseData/toEdit.do','"+escape(JSON.stringify(full))+"',400,500)\" href=\"javascript:void(0);\"title=\"编辑\" ><i class=\"Hui-iconfont\"></i></a> <a style=\"text-decoration:none\" class=\"ml-5\" onClick=\"article_batch_del('"+full.uid+"')\" href=\"javascript:;\" title=\"删除\"><i class=\"Hui-iconfont\"></i></a>";
}
}
]
});
该框架的ajax请求的两种方式(不知道还有没有别的方式,请评论告知,谢谢)
$('#example').DataTable({
oLanguage:oLanguage,
bProcessing:true,//處理中.. 顯示
aaSorting:[9,"desc"]//設置初始化時默認一列來排序
==========================================================
ajax:{//方式一
url:"../base/get-service-user-info",
type:"post",
data:{"name":"張三"} //用來提交參數
}
===========================================================
//方式二
ajax:function(data,callback){
$.ajax({
url:'../base/get-service-user-info',
type:'post',
dataType:'json',
data:{"name":"張三"},//用來提交參數
success:function(obj){
callback(obj);
}
})
},
==========================================================
aoColumns:[//以上两种ajax请求都需要些该属性,方可显示
{data:"NTH"},
{data:"JOB_CARD"},
{data:"UNAME"},
{data:"UNIT"},
{data:"STATION_TRAIT"},
]
});
});
后台处理后返回的结构
Map<String,Object> result = new HashMap<String,Object>();
List<?> list = service.listData();
System.out.println("是否查詢到數據:"+list.toString());
result.put("iTotalDisplayRecords", 2);
result.put("iTotalRecords", 2);
result.put("data", list);
===================华丽风格线=================
dataTable 数据清理+对象销毁-->>三个要点
if(!!_dataTable){
_dataTable.destroy();//要点1
_dataTable.clear();//要点2
}
var dataSet = [ [locations[1],locations[0],auditTime,auditUser,point] ];
_dataTable = $('#example').DataTable({
oLanguage:oLanguage,
bProcessing:true,//處理中.. 顯示
aaSorting:[0,"desc"],//設置初始化時默認一列來排序
data:dataSet,
destroy: true,//要点3
columns:[
{title:"名稱"},
{title:"地點"},
{title:"時間"},
{title:"稽核成員"},
{title:"稽核要點"},
{title:"操作","render":function(data,type,full,meta){
return "<a href='javascript:alert(0)'>確定</a>";
}}
]
});