前言:很方便的分页处理,这里由前端处理数据,后端把所有数据要分页的数据都获取到,根据datatables设置的每页显示的数量即可进行分页显示(注意:如果有大量的数据进行分页时,自行修改配置)
项目链接可参考:项目地址(大二学渣,个人学习的项目,有点简陋勿喷。。。)
主要操作:
<script>
var table;
function attendQuery() {
table.ajax.reload();
}
$(function () {
//提示信息
$.fn.dataTable.ext.errMode = 'none';
var lang = {
"sProcessing": "处理中...",
"sLengthMenu": "每页 _MENU_ 项",
"sZeroRecords": "没有匹配结果",
"sInfo": "当前显示第 _START_ 至 _END_ 项,共 _TOTAL_ 项。",
"sInfoEmpty": "当前显示第 0 至 0 项,共 0 项",
"sInfoFiltered": "(由 _MAX_ 项结果过滤)",
"sInfoPostFix": "",
"sSearch": "搜索:",
"sUrl": "",
"sEmptyTable": "表中数据为空",
"sLoadingRecords": "载入中...",
"sInfoThousands": ",",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上页",
"sNext": "下页",
"sLast": "末页",
"sJump": "跳转"
},
"oAria": {
"sSortAscending": ": 以升序排列此列",
"sSortDescending": ": 以降序排列此列"
}
};
//初始化表格
table = $("#example2")
.on('error.dt', function (e, settings, techNote, message) {
console.warn(message)
}).dataTable({
language: lang, //提示信息
autoWidth: false, //禁用自动调整列宽
stripeClasses: ["odd", "even"], //为奇偶行加上样式,兼容不支持CSS伪类的场合
processing: true, //隐藏加载提示,自行处理
serverSide: false, //启用服务器端分页
searching: false, //禁用原生搜索
orderMulti: false, //启用多列排序
order: [], //取消默认排序查询,否则复选框一列会出现小箭头
renderer: "bootstrap", //渲染样式:Bootstrap和jquery-ui
pagingType: "simple_numbers", //分页样式:simple,simple_numbers,full,full_numbers
columnDefs: [{
"targets": 'nosort', //列的样式名
"orderable": false //包含上样式名‘nosort'的禁止排序
}],
ajax: function (data, callback, settings) {
//封装请求参数
var param = {};
param.pageSize = data.length;//页面显示记录条数,在页面显示每页显示多少项的时候
param.start = data.start;//开始的记录序号
param.currentPage = (data.start / data.length) + 1;//当前页码
//console.log(param);
//ajax请求数据
$.ajax({
type: "GET",
url: "/fw/user/myStudentList",
cache: false, //禁用缓存
data: param, //传入组装的参数
dataType: "json",
success: function (result) {
var returnData = {};
returnData.draw = data.startRow;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = result.totalRows;//返回数据全部记录
returnData.recordsFiltered = result.totalRows;//后台不实现过滤功能,每次查询均视作全部结果
returnData.data = result.items;//返回的数据列表
//此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
callback(returnData);
}
});
},
"columns": [
//跟你要显示的字段是一一对应的。我这里只显示八列
{'data': 'username'},
{'data': 'realName'},
{'data': 'sex'},
{'data': 'age'},
{'data': 'address'},
{'data': 'grade'},
{'data': 'headImage'},
{
"data": "谨慎操作",
render: function (data, type, full) {
var a = [full.username,"\""+full.realName+"\""
,"\""+full.sex+"\"",full.age,"\""+full.address+"\""
,"\""+full.grade+"\"","\""+full.headImage+"\"",full.id];
return "<button type='button' class='btn btn-info' style='width: 67px;' onclick='viewUpdateStuPage(" + a + ")' data-toggle='modal' data-target='#myModal'>修改</button>" +
"<button type='button' class='btn btn-warning' style='margin-left: 3px;width: 67px;' onclick='delStu(" + full.id + ")'>删除</button>";
}
},
]
})
.api();
//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象
});
</script>
后台使用的是springmvc:
@RequestMapping(value = "/myStudentList",method = RequestMethod.GET)
@ResponseBody
public PageQueryBean myAllStudent(HttpServletRequest request) {
List<User> list = userService.myAllStudent(currentUser); //直接把所有用户都查出来了
if (list == null) {
log.warn("UserController:115 警告!");
}
PageQueryBean pageQueryBean = new PageQueryBean(); //自己创建的一个分页类,直接返回List集合会有问题。
pageQueryBean.setItems(list);
pageQueryBean.setTotalRows(list.size());
return pageQueryBean;
}
PageQueryBean实体类:
public class PageQueryBean {
private static final int DEFAULT_PAGE_SIZE = 10;
/** 当前页 */
private Integer currentPage;
/** 每页显示数据条数 */
private Integer pageSize;
/** 所有记录数 */
private int totalRows;
/** sql查询起始行 */
private Integer startRow;
/** 总页数 */
private Integer totalPage;
/** 查询所得数据集 */
private List<?> items;
public final Integer getStartRow() {
if (startRow == null)
startRow = (currentPage == null ? 0 : (currentPage - 1) * getPageSize()) ;
return startRow;
}
public void setStartRow(Integer startRow) {
this.startRow = startRow;
}
public final Integer getPageSize() {
return pageSize == null ? DEFAULT_PAGE_SIZE : pageSize;
}
public final void setPageSize(Integer pageSize) {
this.pageSize = pageSize;
}
public final int getTotalRows() {
return totalRows;
}
public final void setTotalRows(int totalRows) {
this.totalRows = totalRows;
int totalPage = totalRows % getPageSize() == 0 ? totalRows / getPageSize() : totalRows / getPageSize() + 1;
setTotalPage(totalPage);
}
public final List<?> getItems() {
return items == null ? Collections.EMPTY_LIST : items;
}
public final void setItems(List<?> items) {
this.items = items;
}
public final Integer getCurrentPage() {
return currentPage;
}
public final void setCurrentPage(Integer currentPage) {
this.currentPage = currentPage;
}
public final Integer getTotalPage() {
return totalPage == null || totalPage == 0 ? 1 : totalPage;
}
public final void setTotalPage(Integer totalPage) {
this.totalPage = totalPage;
}
@Override
public String toString() {
return "PageQueryBean [currentPage=" + currentPage + ", pageSize="
+ pageSize + ", totalRows=" + totalRows + ", startRow="
+ startRow + ", totalPage=" + totalPage + ", items=" + items
+ "]";
}
}