最近在做mybatis+datatables分页，来做个总结，dataTables还是有很多功能可以拿来一用的
首先贴一个效果图：
使用的时候还加了自定义的查询，后面会写到
1.引入js
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="js/datatable/jquery.dataTables.min.js?4"></script>
<scripttype="text/javascript" language="javascript" src="js/datatable/dataTables.bootstrap.js"></script>
涉及到样式的需引用bootstrap对应的样式，否则dataTables原生的分页个人觉得是很难看了
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/datatables/css/dataTables.bootstrap.css" rel="stylesheet" />
引用参数js，详细见上一篇文章 JQuery DataTables 参数(一)
<script type="text/javascript" language="javascript" src="js/datatable/dataTablesSettings.js?4"></script>
2.前端页面使用dataTables时的js
var dataTable;
$(document).ready(function() {
$.dataTablesSettings.ajax={ //ajax方式向后台发送请求
"type": "POST",
"url":"/base/example/list",
"data":{ //传递的数据
"example.id":"1"
},
"dataType" : "json"
};
$.dataTablesSettings.aoColumns=[//对接收到的json格式数据进行处理，data为json中对应的key
{"data":null,"title":"序号","className":"text-center", "render":function(data,type,row,meta) {return meta.row + 1 +meta.settings._iDisplayStart;}},
{"data":"exampleName","title":"示例名称"},
{"data":"createdDate","title":"创建时间","render":function(data, type, row, meta){return getMyDate(data.time);}},
{"data":"exampleId","title":"操作","className":"text-center","render":function(data, type, row, meta){
return '<div class="dropdown text-center">'
+' <a href="javascript:void(0)" data-toggle="modal" data-target="#employeeManageModal" onclick="EmployeeMain.edit(\''+row.employeeId+'\')">修改</a> '
+' <a href="javascript:void(0)" onclick="test('+row.exampleName+')">删除</a> '
+'</div>';}}
];
dataTable = $("#example").dataTable($.dataTablesSettings);
});
使用时无特殊需求只需给请求地址和显示的列表赋值，html代码只需要定义一个table即可
3.后台首先需要一个分页操作的对象,取到前端传到request中的页码数据
public class PageParam<T> {
/*------------------DT自动请求的参数(Sent parameters) begin--------------------*/
/*
* 绘制计数器。这个是用来确保Ajax从服务器返回的是对应的（Ajax是异步的，因此返回的顺序是不确定的）。 要求在服务器接收到此参数后再返回
*/
private int draw; // 第几次请求
/*
* 第一条数据的起始位置，比如0代表第一条数据
*/
private int start = 0;// 起止位置
/*
* 告诉服务器每页显示的条数，这个数字会等于返回的 data集合的记录数，可能会大于因为服务器可能没有那么多数据。
* 这个也可能是-1，代表需要返回全部数据(尽管这个和服务器处理的理念有点违背)
*/
private int length = 100; // 数据长度
/*
* 全局的搜索条件，条件会应用到每一列（ searchable需要设置为 true ）
*/
private String search;
/*
* 如果为 true代表全局搜索的值是作为正则表达式处理，为 false则不是。
* 注意：通常在服务器模式下对于大数据不执行这样的正则表达式，但这都是自己决定的
*/
private boolean is_search;
/*
* 告诉后台那些列是需要排序的。 i是一个数组索引，对应的是 columns配置的数组，从0开始
*/
private int[] order;
/*
* 告诉后台列排序的方式， desc 降序 asc升序
*/
private String order_dir;
/*
* columns 绑定的数据源，由 columns.dataOption 定义。
*/
private String columns_data;
/*
* columns 的名字，由 columns.nameOption 定义。
*/
private String columns_name;
/*
* 标记列是否能被搜索,为true代表可以，否则不可以，这个是由 columns.searchableOption 控制
*/
private String columns_searchable;
/*
* 标记列是否能排序,为 true代表可以，否则不可以，这个是由 columns.orderableOption 控制
*/
private boolean is_orderable;
/*
* 标记具体列的搜索条件
*/
private String columns_search_value;
/*
* 特定列的搜索条件是否视为正则表达式， 如果为 true代表搜索的值是作为正则表达式处理，为 false则不是。
* 注意：通常在服务器模式下对于大数据不执行这样的正则表达式，但这都是自己决定的
*/
private boolean is_search_regex;
/*------------------DT自动请求的参数(Sent parameters) end--------------------*/
/*------------------服务器需要返回的数据(Returned data) begin--------------------*/
/*
* 必要。上面提到了，Datatables发送的draw是多少那么服务器就返回多少。
* 这里注意，作者出于安全的考虑，强烈要求把这个转换为整形，即数字后再返回，而不是纯粹的接受然后返回，这是 为了防止跨站脚本（XSS）攻击。
*/
// private int draw;
/*
* 必要。即没有过滤的记录数（数据库里总共记录数）
*/
private int recordsTotal;
/*
* 必要。过滤后的记录数（如果有接收到前台的过滤条件，则返回的是过滤后的记录数）
*/
private int recordsFiltered;
/*
* 必要。表中中需要显示的数据。这是一个对象数组，也可以只是数组， 区别在于 纯数组前台就不需要用 columns绑定数据，会自动按照顺序去显示
* ，而对象数组则需要使用 columns绑定数据才能正常显示。 注意这个 data的名称可以由 ajaxOption 的
* ajax.dataSrcOption 控制
*/
private List<T> data;
/*
* 可选。你可以定义一个错误来描述服务器出了问题后的友好提示
*/
private String error;
/*-------------可选参数-----------------*/
/*
* 自动绑定到 tr节点上
*/
private String dt_rowId;
/*
* 自动把这个类名添加到 tr
*/
private String dt_rowClass;
/*
* 使用 jQuery.data() 方法把数据绑定到row中，方便之后用来检索（比如加入一个点击事件）
*/
private Object dt_rowData;
/*
* 自动绑定数据到 tr上，使用 jQuery.attr() 方法，对象的键用作属性，值用作属性的值。 注意这个 需要 Datatables
* 1.10.5+的版本才支持
*/
private Object dt_rowAttr;
/*-------------可选参数-----------------*/
/*------------------服务器需要返回的数据(Returned data) end--------------------*/
/*
* 当前页码
*/
private int page_num = 1;
/*
* 每页数据
*/
private int page_size = 100;
public PageParam() {
}
public PageParam(HttpServletRequest request) {
//开始的数据行数
String start = request.getParameter("start");
//每页的数据数
String length = request.getParameter("length");
//DT传递的draw:
String draw = request.getParameter("draw");
this.setStart(Integer.parseInt(start));
this.setLength(Integer.parseInt(length));
this.setDraw(Integer.parseInt(draw));
//计算页码
this.page_num = (Integer.parseInt(start) / Integer.parseInt(length)) + 1;
}
/**
* getter setter
*/
}
后台每次返回给前端的是一段拼好的json
@Action(value="list",results={@Result(name="success",type="plainText")})
public String list(){
//初始化分页数据
PageParam<Example> pageParam=new PageParam<>(this.getRequest());
PageHelper.startPage(pageParam.getPage_num(), pageParam.getLength());
//查询数据
List<Example> list = exampleService.list(example);
PageInfo<Example> page = new PageInfo<>(list);
pageParam.setData(list);
pageParam.setRecordsTotal((int)page.getTotal());
pageParam.setRecordsFiltered((int)page.getTotal());
String json=JsonUtil.objectToJson(pageParam);
this.getWriter().write(json);
this.closeWriter();
return SUCCESS;
}
之前的框架用的是struts2 所以每次用dispatcher返回一个页面给前端，其实有用的信息就只有查询到的数据。返回json也可以减小每次传输的数据大小，提高传输速度。
----------------------------------------------------------------纪念一下第一篇流水账式的博客 -----------------------------------------------------------