datatable分页指南--前台分页和后台分页
一、介绍
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
- 分页，即时搜索和排序
- 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
- 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
- 各式各样的扩展: Editor, TableTools, FixedColumns ……
- 丰富多样的option和强大的API
- 支持国际化
- 超过2900+个单元测试
三、html
用户id
主叫
识别码
区域id
服务类型
服务组
位置区码
GPRS节点
分配记数
协议类型
开始时间
结束时间
四、js代码
var table1;
//dataTable初始化对象
function bigDataTable(queryData){
table1= $('#bigDataList').DataTable({
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"aaSorting" : [[0, "asc"]], //默认的排序方式，第1列，升序排列
"info": true,
"autoWidth": false,
"destroy":true,
"processing":true,
"scrollX": true, //水平新增滚动轴
// "serverSide":true, //true代表后台处理分页，false代表前台处理分页
"aLengthMenu":[10,15,20],
"PaginationType" : "full_numbers", //详细分页组，可以支持直接跳转到某页
//当处理大数据时，延迟渲染数据，有效提高Datatables处理能力
"deferRender": true,
"ajax":{
url:"getJson_BigData_queryDataByParams",
dataSrc:
function(data){
if(data.callbackCount==null){
data.callbackCount=0;
}
//抛出异常
if(data.sqlException){
alert(data.sqlException);
}
//查询结束取消按钮不可用
$("#queryDataByParams").removeAttr("disabled");
return data.dataList; //自定义数据源，默认为data
}, //dataSrc相当于success，在datatable里面不能用success方法，会覆盖datatable内部回调方法
type:"post",
data:queryData
},
columns:[
{ data: 'user_ip' },
{ data: 'calling'},
{ data: 'imei' },
{ data: 'cell_id'},
{ data: 'service_type' },
{ data: 'service_group'},
{ data: 'lac' },
{ data: 'sgsn'},
{ data: 'assignment_count' },
{ data: 'proto_type'},
{ data: 'start_time' },
{ data: 'end_time'},
],
/*是否开启主题*/
"bJQueryUI": true,
"oLanguage": { // 语言设置
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉， 没有找到",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"sZeroRecords": "没有检索到数据",
"sSearch": "检索:",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
}
},
});
}点击请求ajax，返回渲染数据：
//点击查询
$("#queryDataByParams").on("click",function() {
var reg = new RegExp("^[0-9]*$");
var startTime=$("#searchDateRange").val().substring(0,19).replace(/-/g, '/');
var endTime=$("#searchDateRange").val().substring(22,41).replace(/-/g, '/');
var date1=new Date(startTime); //开始时间
var date2=new Date(endTime); //结束时间
var date3=date2.getTime()-date1.getTime() //时间差的毫秒数
if(date3>60*60*24*1000){
alert("开始时间与结束时间间隔大于24小时！");
return false;
}
if(!$("#searchDateRange").val() || $("#searchDateRange").val()=="填写时间段"){
alert("时间区段不能为空！");
return false;
}
if(!$("#calling").val() && !reg.test($("#calling").val())){
alert("请输入全数字!");
}
//查询时候设置按钮不可用
$("#queryDataByParams").attr("disabled", true);
var queryData={"startseg":$("#searchDateRange").val(),
"callseg":$("#calling").val(),
"identifiCode":$("#identifiCode").val(),
"areaId":$("#areaId").val(),
"serviceType":$("#serviceType").val(),
"serviceGroup":$("#serviceGroup").val(),
"areaCode":$("#areaCode").val(),
"gprsNode":$("#gprsNode").val(),
"distritNum":$("#distritNum").val(),
"protocolType":$("#protocolType").val()
};
if(table1!=null || table1 !=undefined){
// dataTable初始化之后不能再设值，需要销毁重新定义，(数据量大时不适用)
// table1.destroy();
// bigDataTable(queryData);
// var src={
// url:"getJson_BigData_queryDataByParams",
// dataSrc :"dataList", //自定义数据源，默认为data
// type:"post",
// data:{"test":$("#protocolType").val()}
// };
// table1.fnSettings().ajax=src; //ajax访问数据
// table1.fnPageChange(0,true); //分页的页数从0开始
table1.settings()[0].ajax.data=queryData;
table1.ajax.reload();
}else{
bigDataTable(queryData);
}
});上面是前台分页，如果要做后台分业，当然最好就是用后台分页：
1.修改datatable初始化属性，新增
"serverSide":true, //true代表后台处理分页，false代表前台处理分页2.后台即可获取到每页数据，当前页参数
private int length;
private int start:
public int getLength(){
return length;
}
public void setLength(int length){
this.length = length;
}
public int getStart(){
return start;
}
public void setStart(int start){
this.start = start;
}我的后台是用struts2写的，其他的也可以用request里面获取，这个值初始化设置之后会一起返回给后端的，然后后端操作数据库的时候，就可以根据这两个参数就行真分页了。
public String dataPaging(){
resultJson = new HashMap();
searchItem = getRequest().getParameter("extra_search");
List list = new ArrayList();
list = logService.queryForPaging(start,length,searchItem);
int count = logService.queryForPagingSize(searchItem);
resultJson.put("draw", Integer.toString(draw));
resultJson.put("recordsTotal", Integer.toString(count));
resultJson.put("recordsFiltered", Integer.toString(count));
resultJson.put("data", list);
return "success";
} public List queryForPaging(int start,int length,String query) {
Criteria cri = getSession().createCriteria(this.persistentClass);
cri.addOrder(Order.desc("id")).setFirstResult(start).setMaxResults(length);
if(query != null && !"".equals(query)){
cri.add(Restrictions.like("username", query, MatchMode.ANYWHERE));
}
List list = cri.list();
return list;
} 前后台数据交互：
前台格式：
ID
店铺名称
优惠活动
开始时间
结束时间
操作
columns:[
{ data: 'id' },
{ data: 'storeInfo.realName'},
{ data: 'content' },
{ data: 'startTime',
"render": function ( data, type, full, meta ) {
var dataStr = Date.parse(data);
return new Date(dataStr).Format("yyyy-MM-dd hh:mm:ss");
}
},
{ data: 'endTime',
"render": function ( data, type, full, meta ) {
var dataStr = Date.parse(data);
return new Date(dataStr).Format("yyyy-MM-dd hh:mm:ss");
}
},
{data:'id',
"render": function ( data, type, full, meta ) {
var edithtml =" "+
""
return edithtml;
}
}
],日期格式化：
Date.prototype.Format = function (fmt) { //author: meizz
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
return fmt;
}后台返回的json数据：
{
"resultList": [
{
"content": "元旦大促销活动",
"endTime": "2016-01-03T22:00:00",
"id": 1,
"startTime": "2016-01-01T08
:00:00",
"storeInfo": {
"buildingId": 3,
"buildingName": "一号楼",
"floorId": 4,
"floorName": "一层",
"id": 1,
"realName": "KFC",
"siteId": 2,
"siteName": "河西万达",
"storeId": 7,
"storeName": "Z1",
"zoneId": 1,
"zoneName": "万达企业"
}
},
{
"content": "手撕汉堡，新品上市，买一送一",
"endTime": "2015-12-30T14:43:38",
"id": 2,
"startTime": "2015-12-29T14:43:34",
"storeInfo": {
"buildingId": 3,
"buildingName": "一号楼",
"floorId": 4,
"floorName": "一层",
"id": 1,
"realName": "KFC",
"siteId": 2,
"siteName": "河西万达",
"storeId": 7,
"storeName": "Z1",
"zoneId": 1,
"zoneName": "万达企业"
}
},
{
"content": "麻麻黑，免费吃，只
要你能吃得完，随便吃",
"endTime": "2016-02-15T14:45:05",
"id": 3,
"startTime": "2016-02-01T14:44:53",
"storeInfo": {
"buildingId": 3,
"buildingName": "一号楼",
"floorId": 4,
"floorName": "一层",
"id": 1,
"realName": "KFC",
"siteId": 2,
"siteName": "
河西万达",
"storeId": 7,
"storeName": "Z1",
"zoneId": 1,
"zoneName": "万达企业"
}
}
]
}中文文档：点击打开链接