JQuery分页插件
挺好用的
但是官方是没有提供首页尾页以及跳转功能
我觉得这个功能可以有，于是就改进了一下
一个js一个css从连接里面下
链接：http://pan.baidu.com/s/1nvaq99R 密码：9nfb
还有记得引入jquery，这个必须有
上效果图：
页面代码
<script type="text/javascript"> //分页查询开始 $(document).ready(function() { getDataList(0, null); }); var rows = 10; var page = 1; var initFlag = true; function getDataList(currPage, jg) { $.ajax({ url : "page", type : "post", dataType : 'json', data : {rows : rows,page : currPage + 1}, contentType : "application/x-www-form-urlencoded; charset=utf-8", success : function(response) { if (response.result) { if (response.data != null && response.data != ""&& response.total != undefined && response.total > 0) { if (initFlag) { $("#Pagination").pagination( response.total, { items_per_page : rows, num_edge_entries : 1, num_display_entries : 8, callback : getDataList//回调函数 }); initFlag = false; } $("#listData").html(""); loadDataList(response.data); } else { //暂无数据 } } else { //暂无数据 } } }); } function loadDataList(listdata) { //表头 var html ="<tr class='t-header'>"+ "<td>头像</td>"+ "<td>姓名</td>"+ "<td>密码</td>"+ "</tr>"; $("#listData").append(html); for (var i = 0; i < listdata.length; i++) { var n = listdata[i]; //表格 var html = "<tr>"+ "<td>"+"<img src='getphoto?unid="+n.uuid+"' onerror='this.src="resources/img/default.png"' style='48px;height:48px;border-radius:48px;'/>"+"</td>"+ "<td>"+n.username+"</td>"+ "<td>"+n.password+"</td>"+ "</tr>"; $("#listData").append(html); } } //分页查询结束 </script>
<body> <div class="clearbox"> <div class="x-box"> <h2><a>表格</a></h2> <table id="listData"></table> </div> <div id="Pagination" class="pagination"></div> </div> </body>
后台代码
/** * 分页请求地址 * @param request * @param response * @return */ @ResponseBody @RequestMapping("page") public Map<String, Object> page(HttpServletRequest request,HttpServletResponse response){ int total = userService.getTotal(); int page = Integer.parseInt(request.getParameter("page"));//当前页 int rows = Integer.parseInt(request.getParameter("rows"));//每页条数 List<User> data =userService.getCurrentPage((page-1)*rows, rows); boolean result = (data == null)?false:true; Map<String, Object> map = new HashMap<String, Object>(); map.put("data", data); map.put("total", total); map.put("result", result); return map; }
就先这样，有什么不清楚的可以给我留言。