• laypage 物理分页与逻辑分页实例


    前言

      以下介绍摘自 layui官网laypage 

      layPage 致力于提供极致的分页逻辑,既可轻松胜任异步分页,也可作为页面刷新式分页。自 layui 2.0 开始,无论是从核心代码还是API设计,layPage 都完成了一次蜕变。清爽的UI、灵活的排版,极简的调用方式,这一切的优质元素,都将毫无违和感地镶嵌在你的页面之中。laypage 的使用非常简单,指向一个用于存放分页的容器,通过服务端得到一些初始值,即可完成分页渲染,laypage 只负责分页本身的逻辑,具体的数据请求与渲染需要另外去完成。laypage 不仅能应用在一般的异步分页上,还可直接对一段已知数据进行分页展现,更可以取代传统的超链接分页。

    效果

    代码编写

      项目背景:springboot + springdata-jpa + thymeleaf + mysql

      代码贴出来:同样的,大部分逻辑都写在了注释里面

      maven引包

            <!-- springboot -->
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
    
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
            </dependency>
    
            <!--Thymeleaf模板依赖-->
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-thymeleaf</artifactId>
            </dependency>
    
            <!--添加springdata-jpa依赖 -->
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-data-jpa</artifactId>
            </dependency>
    <!--lombok插件 --> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency>
        <!--添加MySQL驱动依赖 -->
        <dependency>
         <groupId>mysql</groupId>
          <artifactId>mysql-connector-java</artifactId>
         <scope>runtime</scope>
        </dependency>

      实体类

    @Entity
    @Table(name = "t_user")
    @Data
    public class User {
    
        @Id
        @GeneratedValue(strategy= GenerationType.AUTO)
        private Integer id;
    
        private String username;
    
        private String password;
    
    }

      响应头

    /**
     * 响应头
     */
    @Data
    public class Result<T> {
    
        private String message; //通讯消息
    
        private boolean flag; //通讯状态
    
        private T data; //通讯数据
    
        public Result() {
        }
    
        public Result(boolean flag,String message, T data) {
            this.message = message;
            this.flag = flag;
            this.data = data;
        }
    
        public static<T> Result build(boolean flag, String message, T data){
            return new Result(flag,message,data);
        }
    }

      分页头

    /**
     * 分页头
     */
    @Data
    public class PageHeader<T> {
    
        private Integer page;//当前页
    
        private Integer rows;//每页多少条
    
        private Integer count;//总数
    
        private List<T> results;//数据集合
    
    }

      Controller层

    @RestController
    @RequestMapping("/user")
    public class UserController {
    
        @Autowired
        private UserService userService;
    
        /**
         * 跳转index页面
         */
        @GetMapping("/index")
        public ModelAndView index() {
            return new ModelAndView("user_page.html");
        }
    
        /**
         * 分页获取user
         */
        @PostMapping("/page")
        public Result<PageHeader<User>> page(PageHeader<User> pageHeader){
            return userService.getPageUser(pageHeader);
        }
    
        /**
         * 获取所有user
         */
        @PostMapping("/list")
        public Result<User> list(){
            return userService.getAllUser();
        }
    }

      Service层

    @Service
    public class UserService {
    
        @Autowired
        private UserRepository userRepository;
    
      /**
         * 获取所有user
         */
        public Result getAllUser() {
            List<User> userList = userRepository.findAll();
            return Result.build(true,"获取成功!",userList);
        }
    
        /**
         * 分页获取user
         */
        public Result<PageHeader<User>> getPageUser(PageHeader<User> pageHeader) {
            pageHeader.setPage(pageHeader.getPage() - 1);//masql下标从0开始
            Page<User> userPage = userRepository.findAll(new PageRequest(pageHeader.getPage(), pageHeader.getRows()));
            pageHeader.setCount((int) userPage.getTotalElements());//总数
            pageHeader.setResults(userPage.getContent());//数据
            return Result.build(true,"获取成功",pageHeader);
        }
    }

      Repository层

    public interface UserRepository extends JpaRepository<User,Integer> , JpaSpecificationExecutor<User> {
    
    }

      user_page.html

    <!DOCTYPE html>
    <!--解决idea thymeleaf 表达式模板报红波浪线-->
    <!--suppress ALL -->
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>laypage 物理分页与逻辑分页实例</title>
        <link rel="stylesheet" href="http://hanlei.online/Onlineaddress/layui/css/layui.css"/>
        <style>
            body{
                padding: 0px 100px;
            }
            .main {
                margin: auto;
                width: 600px;
                margin-top: 50px;
            }
        </style>
    </head>
    <body>
    <!--逻辑分页-->
    <div class="main" style="float: left;">
        <h1>逻辑分页</h1><br/>
        <div id="users_logic"></div>
        <div id="page_logic"></div>
    </div>
    <!--物理分页-->
    <div class="main" style="float: right;">
        <h1>物理分页</h1><br/>
        <div id="users_physics"></div>
        <div id="page_physics"></div>
    </div>
    </body>
    <!-- jquery在线版本 -->
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://hanlei.online/Onlineaddress/layui/layui.js"></script>
    <script th:inline="javascript">
        var ctx = /*[[@{/}]]*/'';//应用根路径
        var users = {};//所有数据(逻辑分页用到)
        var pages = 0; //总数(逻辑分页用到)
    
        $(function ($) {
            //逻辑分页
            load_page_logic(1,10);
    
            //物理分页
            load_page_physics(1,10);
        });
    
        /**
         * 逻辑分页
         */
        function load_page_logic(curr,limit){
            $.post(ctx+"/user/list",{},function (result) {
                if (result.flag){
                    users = result.data;//所有数据
                    pages = users.length; //总数
                    //获取一个laypage实例
                    layui.use('laypage', function () {
                        var laypage = layui.laypage;
                        //调用laypage 逻辑分页
                        laypage.render({
                            elem: 'page_logic',
                            count: pages,
                            curr:curr,
                            limit:limit,
                            limits: [5,10,15],
                            layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                            jump: function (obj, first) {
                                //obj包含了当前分页的所有参数,比如:
                                // console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
                                // console.log(obj.limit); //得到每页显示的条数
                                document.getElementById('users_logic').innerHTML = thisDate_logic(obj.curr,obj.limit);
                            },
                            prev: '<',
                            next: '>',
                            theme: '#f9c357',
                        })
                    });
                }
            });
        }
    
        /**
         * 传入当前页、每页多少条记录,根据limit去计算,从users集合截取对应数据做展示
         */
        var thisDate_logic = function (curr,limit) {
            var str = "",//当前页需要展示的html
                first = (curr * limit - limit),//展示的第一条数据的下标
                last = curr * limit - 1;//展示的最后一条数据的下标
            last = last >= pages ? (pages - 1) : last;
            for (var i = first; i <= last; i++) {
                var user = users[i];
                str += "<div class='user'>" +
                    "<p>用户名:" + user.username + "    密码:" + user.password + "</p>" +
                    "</div><br/>";
            }
            return str;
        };
    
    
        /*************************华丽的分割线****************************/
    
    
        /**
         * 物理分页(每次都重新生成laypage分页栏,技巧来自layui社区:https://fly.layui.com/jie/8471/)
         */
        function load_page_physics(curr,limit){
            $.post(ctx+"/user/page",{page:curr,rows:limit},function (result) {
                if (result.flag){
                    var usersPage = result.data;
                    //展示数据
                    document.getElementById('users_physics').innerHTML = thisDate_physics(usersPage.results);
                    //获取一个laypage实例
                    layui.use('laypage', function () {
                        var laypage = layui.laypage;
                        //调用laypage 逻辑分页
                        laypage.render({
                            elem: 'page_physics',
                            count: usersPage.count,
                            curr: curr,
                            limit:limit,
                            limits: [5,10,15],
                            layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
                            jump: function (obj, first) {
                                //obj包含了当前分页的所有参数,比如:
                                // console.log(obj.curr); //得到当前页,以便向服务端请求对应页的数据。
                                // console.log(obj.limit); //得到每页显示的条数
                                if(!first) {
                                    load_page_physics(obj.curr,obj.limit);
                                }
                            },
                            prev: '<',
                            next: '>',
                            theme: '#f9c357',
                        })
                    });
                }
            });
        }
    
        /**
         * 传入users做数据做展示
         */
        var thisDate_physics = function (users) {
            var str = "";
            for (var i = 0; i < users.length; i++) {
                var user = users[i];
                str += "<div class='user'>" +
                    "<p>用户名:" + user.username + "    密码:" + user.password + "</p>" +
                    "</div><br/>";
            }
            return str;
        };
    </script>
    </html>

    后记

      laypage.render(options)更多参数查看layui官方文档,这个例子只有分页功能,搜索、排序自行扩展一下就可以了。

    版权声明

    作者:huanzi-qch
    若标题中有“转载”字样,则本文版权归原作者所有。若无转载字样,本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利.


    捐献、打赏

    请注意:作者五行缺钱,如果喜欢这篇文章,请随意打赏!

    支付宝

    微信


    QQ群交流群

    QQ群交流群
    有事请加群,有问题进群大家一起交流!

  • 相关阅读:
    ASP.NET MVC 视图
    ASP.NET MVC 控制器
    ASP.NET MVC 入门
    SQL 兼容性设置
    this template attempted to load component assembly 'NuGet.VsiualStudio.interop,version=1.0.0.0 culture=neutral publickeytoken=0000000'. 解决方案
    SQL 时间函数
    [原创]PageOffice+MobOffice 电脑、移动跨平台Office文档在线流转解决方案
    [原创]Java调用PageOffice给Word中的Table赋值
    [原创]Java调用PageOffice在线打开数据库中保存的Word文件
    [原创]新版PageOffice V4.0为什么用弹出窗口的方式打开文件?
  • 原文地址:https://www.cnblogs.com/huanzi-qch/p/9833297.html
Copyright © 2020-2023  润新知