A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

数据表格分页实现之----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的位置:
<table class="layui-hide" id="test"></table>
JS中加载laypage模块,并配置表格的列或者其他属性:
1 <script>
2 layui.use('table', function(){
3   var table = layui.table;
4   table.render({
5     elem: '#test'
6     ,url:'/demo/table/user/'
7     ,page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem- 详见文档
8       layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
9       //,curr: 5 //设定初始在第 5
10       ,groups: 1 //只显示 1 个连续页码
11       ,first: false //不显示首页
12       ,last: false //不显示尾页
13      
14     }
15     ,cols: [[
16       {field:'id', width:80, title: 'ID', sort: true}
17       ,{field:'username', width:100, title: '用户名'}
18       ,{field:'sex', width:80, title: '性别', sort: true}
19       ,{field:'city', width:80, title: '城市'}
20       ,{field:'sign', title: '签名', minWidth: 150}
21       ,{field:'experience', width:80, title: '积分', sort: true}
22       ,{field:'score', width:80, title: '评分', sort: true}
23       ,{field:'classify', width:80, title: '职业'}
24       ,{field:'wealth', width:135, title: '财富', sort: true}
26     
27   });
28 });
29 </script>
cols中的数据说明:
字段
使用示例
说明
field
field:'id'
这一列接收的是字段id的值
width
width:80
设置这个单元格的宽度
title
title:'用户名'
单元格的标题
sort
sort:true
是否排序
四、后台需要返回的数据格式
数据表格需要后台返回JSON格式的数据,数据格式如下:
1 {
2   code: 0,
3   msg: "",
4   count: 1000,
5   data: []
6 }
五、使用实例

JSP页面】userList.jsp页面
1 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
2 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
3 <!DOCTYPE html>
4 <!-- 网页使用的语言 -->
5 <html lang="zh-CN">
6 <head>
7     <meta charset="utf-8">
8     <meta http-equiv="X-UA-Compatible" content="IE=edge">
9     <meta name="viewport" content="width=device-width, initial-scale=1">
10     <title>用户信息管理系统</title>
11     <!-- 1. 导入CSS的全局样式 -->
12     <link href="css/bootstrap.min.css" rel="stylesheet">
13     <link rel="stylesheet" href="layui/css/layui.css">
14     <!-- 2. jQuery导入,建议使用1.9以上的版本 -->
15     <script src="js/jquery-2.1.0.min.js"></script>
16     <!-- 3. 导入bootstrapjs文件 -->
17     <script src="js/bootstrap.min.js"></script>
18     <script src="layui/layui.js" type="text/javascript"></script>
19 ​
20 </head>
21 <body>
22 <div class="container">
23     <h3 style="text-align: center">用户信息列表</h3>
24     <table class="layui-hide" id="userTable"></table>
25 </div>
26 </body>
27 <script type="text/html" id="barDemo">
28     <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">编辑</a>
29     <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">删除</a>
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>
ServletLayuiPageQueryServlet.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包】

【效果】

2 个回复

正序浏览
一脸懵..看不懂~~~
回复 使用道具 举报
奈斯,棒棒哒
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马