数据表格分页实现之----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中的数据说明： 四、后台需要返回的数据格式 数据表格需要后台返回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. 导入bootstrap的js文件 --> 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> 【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包】
【效果】
| 
收藏
淘帖
踩
