laypage 物理分頁與邏輯分頁實例

時間 2020-04-22

標籤 laypage 物理分頁邏輯實例简体版

原文原文鏈接

前言

　　如下介紹摘自 layui官網laypage javascript

　　layPage 致力於提供極致的分頁邏輯，既可輕鬆勝任異步分頁，也可做爲頁面刷新式分頁。自 layui 2.0 開始，不管是從核心代碼仍是API設計，layPage 都完成了一次蛻變。清爽的UI、靈活的排版，極簡的調用方式，這一切的優質元素，都將毫無違和感地鑲嵌在你的頁面之中。laypage 的使用很是簡單，指向一個用於存放分頁的容器，經過服務端獲得一些初始值，便可完成分頁渲染，laypage 只負責分頁自己的邏輯，具體的數據請求與渲染須要另外去完成。laypage 不只能應用在通常的異步分頁上，還可直接對一段已知數據進行分頁展示，更能夠取代傳統的超連接分頁。css

效果

代碼編寫

　　項目背景：springboot + springdata-jpa + thymeleaf + mysqlhtml

　　代碼貼出來：一樣的，大部分邏輯都寫在了註釋裏面java

　　maven引包mysql

<!-- 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>

　　實體類jquery

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

　　響應頭web

/** * 響應頭 */ @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); } }

　　分頁頭spring

/** * 分頁頭 */ @Data public class PageHeader<T> { private Integer page;//當前頁

    private Integer rows;//每頁多少條

    private Integer count;//總數

    private List<T> results;//數據集合
 }

　　Controller層sql

@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層springboot

@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官方文檔，這個例子只有分頁功能，搜索、排序自行擴展一下就能夠了。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。