作者:
//当前页 private int pageNum; //每页的数量 private int pageSize; //当前页的数量 private int size; //总页数 private int pages; //第一页 private int firstPage; //上一页 private int prePage; //下一页 private int nextPage; //总记录数 private long total; //由于startRow和endRow不常用,这里说个具体的用法 //可以在页面中"显示startRow到endRow 共size条数据" //当前页面第一个元素在数据库中的行号 private int startRow; //当前页面最后一个元素在数据库中的行号 private int endRow; //结果集 private List<T> list; //是否为第一页 private boolean isFirstPage = false; //是否为最后一页 private boolean isLastPage = false; //是否有前一页 private boolean hasPreviousPage = false; //是否有下一页 private boolean hasNextPage = false; //导航页码数 private int navigatePages; //所有导航页号 private int[] navigatepageNums; //导航条上的第一页 private int navigateFirstPage; //导航条上的最后一页 private int navigateLastPage;
/** * 初始化首页数据 */ function initData(pageNo) { //清空原来的数据,找到第一个以外的tr,并移除,用 :gt() $("tr:gt(0)").remove(); $.ajax({ url: "showInvi.do", type: "post", dataType: "json", data: {"pageNo": pageNo}, async: true, success: function (obj) { console.log(obj); if (obj.size === 0) {//如果没有数据 var str = ` <tr> <td colspan="5">没有符合条件的数据</td> </tr> `; $("#dataTble").append(str); $("p").html(""); } else { $.each(obj.list, function (i) { var str = ` <tr> <td>${obj.list[i].title}</td> <td>${obj.list[i].summary}</td> <td>${obj.list[i].author}</td> <td>${obj.list[i].createdate}</td> <td> <a href="/showReply.html?invid=${obj.list[i].id}">查看回复</a>||<a href="javascript:void(0);" onclick="del(${obj.list[i].id},'${obj.list[i].title}');">删除</a> </td> </tr> `; $("#dataTble").append(str); }); $("tr:gt(0):odd").attr("style", "background-color:#90EE90"); //分页,我是放在一个p标签里 var pageFoot = $("p"); //在分页前,清空原来分页的内容 pageFoot.html(""); var pageStr = ""; if (obj.total === 0) {//如果没有数据,就不显示分页条 return; } if (obj.isFirstPage && obj.hasNextPage) {//如果是第一页,并且还有下一页 pageStr = ` <a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">首 页</a>| <a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;"><< 上一页</a>| <a href="javascript:void(0);" onclick="initData(${obj.nextPage});">下一页>></a>| <a href="javascript:void(0);" onclick="initData(${obj.pages});">尾 页</a> ` } else if (obj.isFirstPage && !obj.hasNextPage) {//如果是第一页,并且没有下一页 pageStr = ``//nothing to do } else if (!obj.isFirstPage && obj.hasNextPage) {//如果不是第一页,并且还有下一页 pageStr = ` <a href="javascript:void(0);" onclick="initData(1)">首 页</a>| <a href="javascript:void(0);" onclick="initData(${obj.prePage});"><< 上一页</a>| <a href="javascript:void(0);" onclick="initData(${obj.nextPage});">下一页>></a>| <a href="javascript:void(0);" onclick="initData(${obj.pages});">尾 页</a> ` } else if (!obj.isFirstPage && !obj.hasNextPage) {//如果不是第一页,且没有下一页 pageStr = ` <a href="javascript:void(0);" onclick="initData(${obj.firstPage});">首 页</a>| <a href="javascript:void(0);" onclick="initData(${obj.prePage});"><< 上一页</a>| <a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">下一页>></a>| <a href="javascript:void(0);" style="text-decoration: none;color: grey;cursor:no-drop;">尾 页</a> ` } pageStr += ` 第 ${obj.pageNum} 页/共 ${obj.pages} 页(${obj.total}条) `; pageFoot.append(pageStr); } }, error: function () { alert("initData error"); } }) }
基本上分页部分可以作为模板
他对应的html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <center> <h1>帖子列表</h1> <hr/> <form id="findInvis"> 帖子标题: <input title="请输入帖子标题" name="title"> <!--input的类型还是submit--> <input type="submit" value="搜索" > </form> <div id="infos"> <br/> <table border="1" style="width: 100%;text-align: center" id="dataTble"> <tr style="background-color: #6FABC1;"> <td>标题</td> <td>内容摘要</td> <td>作者</td> <td>发布时间</td> <td>操作</td> </tr> </table> <p></p> </div> </center> <script rel="script" type="text/javascript" src="js/jquery-1.11.2.min.js"></script> <script rel="script" type="text/javascript" src="js/list.js"></script> </body> </html>
对应的ServiceImpl
@Override public PageInfo<Map<String, Object>> selectByPrimaryKey(Integer invid,Integer pageNo) { PageHelper.startPage(pageNo,4); List<Map<String, Object>> maps = replyDetailMapper.selectByPrimaryKey(invid); return new PageInfo<> (maps); }
对应的Controller,是标注 @RestController
的
@RequestMapping("/showInvi.do") public PageInfo<Map<String, Object>> selectByTitle(Invitation invitation,Integer pageNo) { return invitationService.selectByTitle(invitation,pageNo); }