DataTables分页和pageHelper分页
对于绝大部分的项目而言，都需要查询出列表；而便于浏览和操作，分页是每个项目中必不可少的功能之一
在这里整理两个分页的插件 DataTables(js分页)和pageHelper分页 可以在这两个链接中进行扩展
1. DataTables分页
下载好DataTables的压缩包后，在jsp页面中引用
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>DataTabletitle> <meta charset="utf-8" http-equiv="content-type" content="text/html"> <script src=" <%request.getContextPath();%>/resources/jQuery/jquery-3.2.1.min.js">script> <link href=" <%request.getContextPath();%>/resources/bootStrap/css/bootstrap.min.css" rel="stylesheet"> <script src=" <%request.getContextPath();%>/resources/bootStrap/js/bootstrap.min.js">script> <script src="<%request.getContextPath();%>/resources/DataTables/DataTables-1.10.16/js/jquery.dataTables.min.js">script> <script src="<%request.getContextPath();%>/static/testViews/TestDataTable.js">script> <script src="<%request.getContextPath();%>/resources/DataTables/DataTables-1.10.16/js/jquery.dataTables.js">script> <script src="<%request.getContextPath();%>/resources/DataTables/DataTables-1.10.16/js/dataTables.bootstrap.js">script> head> <body> <div class="container"> <div class="row"> <table class="display table table-hover" cellspacing="0" width="100%" id="example">table> div> div> body> html>这是我jsp页面
$(document).ready(function() { var table = $('#example').DataTable( { "ajax":{ url:"/svl/indexAndPageManage/dataTableForList", }, "columns": [ { //此处为隐藏处（可参照官网的例子） "className": 'details-control', "orderable": false, "data": null, "defaultContent": '' }, { "title": "测试次数", "type": "html", "data": "indexid", "defaultContent": "", "name": "indexid" }, { "title": "测试状态", "type": "html", "data": "indexstatus", "defaultContent": "", "name": "indexstatus", "render":function(data, type, full, meta){ if(data == 0){ return "未发布"; } if(data == 1){ return "已发布"; } } }, { // "width":150, "title": "操作", className:"questionPageOper", "type": "html", "data": "indexid", "defaultContent": "", "name": "indexid", "render": function (data, type, full, meta) { var ret = ''+ ''+ ''+ ''; // return ""+ret+""; return ret; } } ], "order": [[1, 'asc']] } );
在后端进行查询的时候，只要返回一个包装类即可(service层代码)
// DataTable分页（这里的公共类要使用list） public DataTableWrapper getDataTableForList(Integer pn) { DataTableWrapper dataTableWrapper = new DataTableWrapper(); ListindexAndPageList = modelCmsIndexMapper.getIndexAndPageList(); dataTableWrapper.setData(indexAndPageList); dataTableWrapper.setStatus(Contants.REQUEST_DATA_OK); dataTableWrapper.setMsg("数据正常"); return dataTableWrapper; }
当然对于jsp的写法也可以向官网一样进行书写
2.pageHelper分页（上面的链接github已经有详细的介绍了）
1）maven需要引入(jar包自己引用)
<dependency> <groupId>com.github.pagehelpergroupId> <artifactId>pagehelperartifactId> <version>XXXversion> dependency>
2）mabatis文件配置
<plugins> <plugin interceptor="com.github.pagehelper.PageInterceptor"> <property name="param1" value="value1"/> <property name="reasonable" value="true"/> plugin> plugins>
3)可分为返回model进行页面填写，也可用ajax进行请求
// pageHelper分页(service代码) public CommonDataWrapper getIndexAndPageList(Integer pn) { CommonDataWrapper commonDataWrapper = new CommonDataWrapper(); LogProperties.log.info(this.getClass()+"---------"); PageHelper.startPage(pn,5); ListindexAndPageModels = modelCmsIndexMapper.getIndexAndPageList(); PageInfo page = new PageInfo(indexAndPageModels,5); if (indexAndPageModels != null && indexAndPageModels.size() > 0){ commonDataWrapper.setMsg("数据正常"); commonDataWrapper.add("pageInfo",page); commonDataWrapper.setStatus(Contants.REQUEST_DATA_OK); }else { commonDataWrapper.setMsg("没有查询数据"); commonDataWrapper.setStatus(Contants.REQUEST_DATA_ERROR); } return commonDataWrapper; }
1> 返回model(controller 写法)
@Autowired
IndexAndPageService indexAndPageService; @RequestMapping(name = "索引页面列表",value = "/indexAndPageList") public String getIndexAndPageList(@RequestParam(value = "pn",defaultValue = "1")Integer pn,Model model){ CommonDataWrapper indexAndPageList = indexAndPageService.getIndexAndPageList(pn); model.addAttribute("indexAndPageList",indexAndPageList.getData()); return "testViews/indexAndPageList"; }
jsp写法
<body> <div class="container"> <div class="row"> <div class="col-md-12"> <h1>列表详情h1> div> div> <div class="row"> <div class="col-md-5 col-md-offset-10"> <button class="btn btn-primary">新增button> <button class="btn btn-danger">删除button> div> div> <div class="row"> <div class="col-md-12"> <table class="table table-hover"> <tr> <th> <input type="checkbox" id="titleCheck"> th> <th> 文章索引ID th> <th> 文章标题 th> <th> 文章内容 th> <th> 操作 th> tr> <c:forEach items="${indexAndPageList.pageInfo.list}" var="indexAndPage"> <tr> <td><input type="checkbox" class="indexId" id="${indexAndPage.indexid}">td> <td>${indexAndPage.indexid}td> <td>${indexAndPage.indextitle}td> <td>${indexAndPage.indexcontent}td> <td> <button class="btn btn-primary"><span class="glyphicon glyphicon-pencil" aria-hidden="true">span>修改button> <button class="btn btn-danger"><span class="glyphicon glyphicon-trash" aria-hidden="true">span>删除button> td> tr> c:forEach> table> div> div> <div row> 当前页数:${indexAndPageList.pageInfo.pageNum},总页数${indexAndPageList.pageInfo.pages},总${indexAndPageList.pageInfo.total}条记录 div> <div row> <div class="col-md-5 col-md-offset-10"> <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="<%request.getContextPath();%>/svl/indexAndPageManage/indexAndPageList?pn=1">首页a> li> <c:if test="${indexAndPageList.pageInfo.hasPreviousPage}"> <li> <a href="<%request.getContextPath();%>/svl/indexAndPageManage/indexAndPageList?pn=${indexAndPageList.pageInfo.pageNum-1}" aria-label="Previous"> <span aria-hidden="true">«span> a> li> c:if> <c:forEach items="${indexAndPageList.pageInfo.navigatepageNums}" var="page_Num"> <c:if test="${page_Num == indexAndPageList.pageInfo.pageNum}"> <li class="active"><a href="<%request.getContextPath();%>/svl/indexAndPageManage/indexAndPageList?pn=${page_Num}">${page_Num}a>li> c:if> <c:if test="${page_Num != indexAndPageList.pageInfo.pageNum}"> <li><a href="<%request.getContextPath();%>/svl/indexAndPageManage/indexAndPageList?pn=${page_Num}">${page_Num}a>li> c:if> c:forEach> <c:if test="${indexAndPageList.pageInfo.hasNextPage}"> <li> <a href="<%request.getContextPath();%>/svl/indexAndPageManage/indexAndPageList?pn=${indexAndPageList.pageInfo.pageNum+1}" aria-label="Next"> <span aria-hidden="true">»span> a> li> c:if> <li> <a href="<%request.getContextPath();%>/svl/indexAndPageManage/indexAndPageList?pn=${indexAndPageList.pageInfo.pages}">末页a> li> ul> nav> div> div> div> body>2）返回ajax
js写法
$(function () { to_page(1); }); function to_page(pn){ $.ajax({ url: "/svl/indexAndPageManage/indexAndPageListByAjax", data: {pn: pn}, success: function (result) { if (result.status == 1) { load_table_data(result.data); load_tableFoot_data(result.data); load_tablePage_data(result.data); } else { alert(result.msg); } } }) } function load_table_data(data) { $("#tabel_data").empty(); var datas = data.pageInfo.list; $.each(datas, function (index, item) { var checkBox = $("").append(''); var indexId = $(" ").append(item.indexid); var indexTitle = $(" ").append(item.indextitle); var indexContent = $(" ").append(item.indexcontent); var editBtn = $(" ").append("") .append(""); $(" ").append(checkBox) .append(indexId) .append(indexTitle) .append(indexContent) .append(editBtn) .append(editBtn) .appendTo("#tabel_data"); }) } function load_tableFoot_data(data) { $("#pageInfoDiv").empty(); var pagaInfo = data.pageInfo; $("#pageInfoDiv").append("当前" + pagaInfo.pageNum + "页,总" + pagaInfo.pages + "页,总" + pagaInfo.total + "条记录"); } function load_tablePage_data(data) { $("#pag").empty(); var pageInfo = data.pageInfo; var currentPage = pageInfo.pageNum; var headPage = $("").append($("").append("首页")); headPage.click(function(){ to_page(1); }); var prePage = $("").append($("").append("«")); var nextPage = $("").append($("").append("»")); $("#pag").append(headPage); if (pageInfo.hasPreviousPage) { $("#pag").append(prePage); } prePage.click(function(){ to_page(currentPage-1); }) $.each(pageInfo.navigatepageNums, function (index, item) { var numLi; if (item == pageInfo.pageNum) { numLi = $("").addClass("active").append($("").append(item).attr("href","#")); } else { numLi = $("").append($("").append(item)); } numLi.click(function(){ to_page(item); }) }); if (pageInfo.hasNextPage) { $("#pag").append(nextPage); } nextPage.click(function(){ to_page(currentPage+1); }) var lastPage = $("").append($("").append("末页")); lastPage.click(function(){ to_page(pageInfo.pages); }) $("#pag").append(lastPage); }