springboot+html页面ajax实现分页模糊查询
期间自己百度了很多，看了网上页面插件，但是没有使用，最后用了比较笨的方法。有很多不足地方希望能被指出
html页面代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body{ text-align: center; margin:0 auto; } .divForm{ display: inline-block; } </style> </head> <body> <h1 style="text-align: center">图书借阅系统---后台管理</h1> <form action="javascript:search()" method="post" id="search"> 图书名称：<input type="text" name="bookName" id="bookName" value=""/> <input type="submit" value="查询"/> <input type="hidden" name="pageindex" id="pageindex" value="1"/> <button onclick="add()" style="width: 50px;height: 25px">新增</button> </form> <table id="tt" class="divForm" border="1"> <tr style="background-color:grey"> <td>图书编号</td> <td>图书分类</td> <td>图书名称</td> <td>作者</td> <td>出版社</td> <td>入库时间</td> <td>是否借阅</td> <td>操作</td> </tr> </table> <p><a href="#" id="minpage">首页</a> <a href="#" id="uppage">上一页</a> <a href="#" id="lapage">下一页</a> <a href="#" id="maxpage">尾页</a></p> <p>共有<span id="totalCount"></span>条数据，当前第<span id="currentPageNo"></span>/ <span id="max"></span>页</p> <script src="../js/jquery-3.3.1.min.js"></script> <script src="../js/jquery-dateformat.js"></script> <script> aaa(); function aaa() { var name=$("#bookName").val(); var pageIndex=$("#pageindex").val(); $.ajax({ type:"get", url:"/info/serachName", data:{"bookName":name,"pageindex":pageIndex}, dataType:"json", success:function (dat) { var str=null; var list=dat.infoList; for (var i=0;i<list.length;i++){ var book=list[i]; var borr; if (book.borrowed==0){ borr="未借阅"; }else if (book.borrowed==1){ borr="已借阅"; } var creationTime=$.format.date(book.creationTime,"yyyy-MM-dd");//时间插件js使用 var stra='<tr><td>'+book.bookCode+ '</td><td>'+book.bookTypeName+ '</td><td>'+book.bookName+ '</td><td>'+book.bookAuthor+ '</td><td>'+book.publishPress+ '</td><td>'+creationTime+ '</td><td>'+borr+ '</td><td><a href="#">查看</a> ' + '<a href="#">修改</a> ' + '<a href="#">删除</a>'+ '</td></tr>'; str=str+stra; } $("#tt tr:gt(0)").remove(); $("#tt").append(str); $("#tt tr:even").css("background-color","grey"); $("#currentPageNo").val(dat.currentPageNo); $("#currentPageNo").html(dat.currentPageNo); $("#max").val(dat.totalPageCount); $("#max").html(dat.totalPageCount); $("#totalCount").val(dat.totalCount); $("#totalCount").html(dat.totalCount); } }) } $("#lapage").on("click",function () { var pageIndex=$("#currentPageNo").val()*1+1; $("#pageindex").val(pageIndex); aaa(); }) $("#uppage").on("click",function () { var pageIndex=$("#currentPageNo").val()*1-1; $("#pageindex").val(pageIndex); aaa(); }) $("#minpage").on("click",function () { var pageIndex=1; $("#pageindex").val(pageIndex); aaa(); }) $("#maxpage").on("click",function () { var pageIndex=$("#max").val(); $("#pageindex").val(pageIndex); aaa(); }) function search() { var pageIndex=1; $("#pageindex").val(pageIndex); aaa(); } </script> </body> </html>
ajax中使用了时间插件jquery-dateformat.js
controller部分代码：
@RequestMapping("/serachName") @ResponseBody public Object serachName(String bookName,String pageindex){ String name=bookName; List<Book_info> infoList=null; int currentPageNo = 1; int pageSize=4; if (name==null){ name=""; } if(pageindex != null){ try{ currentPageNo = Integer.parseInt(pageindex); }catch(NumberFormatException e){ return "error"; } } //总数量 int totalCount=book_infoService.CountListBookByName(name); //总页数 PageSupport pages=new PageSupport(); pages.setCurrentPageNo(currentPageNo);//当前页码 pages.setPageSize(pageSize); //页面容量 pages.setTotalCount(totalCount); //总数量 int totalPageCount = pages.getTotalPageCount();//总页数 //控制首页和尾页 if(pages.getCurrentPageNo() < 1){ pages.setCurrentPageNo(1); }else if(pages.getCurrentPageNo() > totalPageCount){ pages.setCurrentPageNo(totalPageCount); } int count = (pages.getCurrentPageNo()-1)*pageSize;//当前页码起始下标 System.out.println("---------->>>当前页码："+pages.getCurrentPageNo()); System.out.println("---------->>>所有数量："+pages.getTotalCount()); System.out.println("---------->>>所有页数："+pages.getTotalPageCount()); System.out.println("---------->>>当前页下标："+count); System.out.println("---------->>>关键字查询："+bookName); infoList=book_infoService.BookEachforName(name,count,pageSize); Map<String,Object> map=new HashMap<String, Object>(); map.put("infoList",infoList); map.put("bookName",name); map.put("totalCount",pages.getTotalCount()); map.put("totalPageCount",pages.getTotalPageCount()); map.put("currentPageNo",pages.getCurrentPageNo()); return map; }
效果：