数据表格分页实现之----LayUI分页插件
在真实的开发中，我们java开发人员往往不去自己手动实现分页。因为，已经有很多前端框架都为我们提供了分页插件。本章，将介绍一款实用，美观，简单的分页插件--LayUI的LayPage模块。
一、LayUI简介
LayUI是一款经典的模块化前端开发框架，官网地址是：http://www.layui.com/。目前，已经更新到2.3.0版本了。是由职业前端倾情打造，面向所有层次的前后端开发者，零门槛开箱即用的前端UI解决方案，实用简单，上手快，界面风格前卫。
本章实用的是LayUI中的数据表格，数据表格中可配置分页插件，效果如下图所示：
二、下载
在官网首页点击【立即下载】即可：
三、示例代码
使用LayUI的数据表格，必须按照LayUI的格式要求进行编写。使用步骤如下：
引入LayUI的css样式和js类库：
<link rel="stylesheet" href="//res.layui.com/layui/dist/css/layui.css" media="all">
<script src="//res.layui.com/layui/dist/layui.js" charset="utf-8"></script>
<!--注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的-->
在页面上书写一个隐藏的table标签，设置table的位置：
25 </div>
26 </body>
27 <script type="text/html" id="barDemo">
28 编辑
29 删除
30 </script>
31 <script>
32 layui.use('table', function(){
33 var table = layui.table;
34 table.render({
35 elem: '#userTable'
36 ,url:'/layuiPageQueryServlet'
37 ,limits:[5,10,15,20]
38 ,cols: [[
39 {field:'id', width:80, title: '编号', sort: true}
40 ,{field:'name', width:100, title: '姓名'}
41 ,{field:'sex', width:80, title: '性别', sort: true}
42 ,{field:'age', width:80, title: '年龄'}
43 ,{field:'address', width:200,title: '籍贯', minWidth: 150}
44 ,{field:'qq', width:150, title: 'QQ', sort: true}
45 ,{field:'email', width:200, title: '邮箱', sort: true}
46 ,{ title: '操作',toolbar: '#barDemo'}
48 ,page: true
49 });
50 });
51 </script>
52 </html>
【Servlet】LayuiPageQueryServlet.java
1 package com.heima.user.web;
2
3 import com.fasterxml.jackson.databind.ObjectMapper;
4 import com.heima.user.pojo.User;
5 import com.heima.user.service.UserService;
6
7 import javax.servlet.ServletException;
8 import javax.servlet.annotation.WebServlet;
9 import javax.servlet.http.HttpServlet;
10 import javax.servlet.http.HttpServletRequest;
11 import javax.servlet.http.HttpServletResponse;
12 import java.io.IOException;
13 import java.util.HashMap;
14 import java.util.List;
15 import java.util.Map;
16
17 /**
18 * @author buguniao
19 * @desc
20 * @date 2018-07-02:23:29
21 * @copy本项目版权归java31期所有，未经许可不得私自复制，否则，要承当法律责任
22 */
23 @WebServlet(name = "LayuiPageQueryServlet", urlPatterns = "/layuiPageQueryServlet")
24 public class LayuiPageQueryServlet extends HttpServlet {
25
26 @Override
27 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
28 //获取请求参数
29 String page = request.getParameter("page");
30 String limit = request.getParameter("limit");
31 int pageNum = Integer.valueOf(page);
32 int pageSize = Integer.valueOf(limit);
33
34 //起始页
35 int startNum = (pageNum - 1) * pageSize;
36
37 //获取分页数据
38 UserService userService = new UserService();
39 List<User> userList = userService.pageQuery(startNum, pageSize);
40
41 //获取总记录数
42 int totalCount = userService.getTotalCount();
43
44 //封装返回数据
45 Map<String, Object> result = new HashMap<>();
46 result.put("code", 0);
47 result.put("msg", "");
48 result.put("data", userList);
49 result.put("count", totalCount);
50
51 //使用JackSon将数据转换成JSON字符串 响应回去
52 ObjectMapper om = new ObjectMapper();
53 String rs = om.writeValueAsString(result);
54 System.out.println(rs);
55
56 //处理响应乱码
57 response.setContentType("text/html;charset=utf-8");
58 response.getWriter().println(rs);
59 }
60
61
62 @Override
63 public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
64 //处理post请求和响应乱码问题
65 request.setCharacterEncoding("utf-8");
66 response.setContentType("text/html;charset=utf-8");
67 doGet(request, response);
68 }
69 }
【后台使用到的jar包】
【效果】
