理論

laypage 的使用非常簡單，指向一個用於存放分頁的容器，通過服務端得到一些初始值，即可完成分頁渲染。
官網：官網（下載）
示例：示例Demo

通過核心方法：laypage.render(options) 來設置基礎參數，該核心接口的參數如下表所示：

參數選項	說明	類型	類型
elem	指向存放分頁的容器，值可以是容器ID、DOM對象。如： 1. elem: ‘id’ 注意：這裏不能加 # 號 2. elem: document.getElementById(‘id’)	String/Object	-
count	數據總數。一般通過服務端得到	Number	-
limit	每頁顯示的條數。laypage將會藉助 count 和 limit 計算出分頁數。	Number	10
limits	每頁條數的選擇項。如果 layout 參數開啓了 limit，則會出現每頁條數的select選擇框	Array	[10, 20, 30, 40, 50]
curr	起始頁。一般用於刷新類型的跳頁以及HASH跳頁。如： //開啓location.hash的記錄 laypage.render({ elem: ‘test1’, count: 500, curr: location.hash.replace(’#!fenye=’, ‘’), //獲取起始頁 hash: ‘fenye’ //自定義hash值 });	Number	1
groups	連續出現的頁碼個數	Number	5
prev	自定義“上一頁”的內容，支持傳入普通文本和HTML	String	上一頁
next	自定義“下一頁”的內容，同上	String	下一頁
first	自定義“首頁”的內容，同上	String	1
last	自定義“尾頁”的內容，同上	String	總頁數值
layout	自定義排版。可選值有：count（總條目輸區域）、prev（上一頁區域）、page（分頁區域）、next（下一頁區域）、limit（條目選項區域）、refresh（頁面刷新區域。注意：layui 2.3.0 新增）、skip（快捷跳頁區域）	Array	[‘prev’, ‘page’, ‘next’]
theme	自定義主題。支持傳入：顏色值，或任意普通字符。如： 1. theme: ‘#c00’ 2. theme: ‘xxx’ //將會生成 class=“layui-laypage-xxx” 的CSS類，以便自定義主題	String	-
hash	開啓location.hash，並自定義 hash 值。如果開啓，在觸發分頁時，會自動對url追加：#!hash值={curr} 利用這個，可以在頁面載入時就定位到指定頁	String/Boolean	false

注意:

count: total 代表總的數據量，
limit 代表每頁行數，
curr 代表起始頁，但jump函數中的obj.curr取的是當前頁數
jump 方法中obj參數可以取到上面的屬性和方法
first 爲是否首次加載

示例

將下載下來的layui壓縮包解壓後放在項目的webapp根目錄。

模擬測試

代碼

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>laypage Demo</title>
        <link rel="stylesheet" href="layui/css/layui.css" media="all">
        <script src="layui/layui.js" charset="utf-8"></script>
    </head>
    <body>
        <div id="laypage"></div>
        <ul id="city_list"></ul>
        <script>
            layui.use(['laypage', 'layer'], function () {
                let laypage = layui.laypage;
                let data = [
                    '北京',
                    '上海',
                    '廣州',
                    '深圳',
                    '杭州',
                    '長沙',
                    '合肥',
                    '寧夏',
                    '成都',
                    '西安',
                    '南昌',
                    '上饒',
                    '瀋陽',
                    '濟南',
                    '廈門',
                    '福州',
                    '九江',
                    '宜春',
                    '贛州',
                    '寧波',
                    '紹興',
                    '無錫',
                    '蘇州',
                    '徐州',
                    '東莞',
                    '佛山',
                    '中山',
                    '成都',
                    '武漢',
                    '青島',
                    '天津',
                    '重慶',
                    '南京',
                    '九江',
                    '香港',
                    '澳門',
                    '臺北'
                ];
                //調用分頁
                laypage.render({
                    elem: 'laypage', // 存放分頁控件的容器
                    count: data.length, //數據總數。一般通過服務端得到
                    limit: 4,//每頁顯示的條數。laypage將會藉助 count 和 limit 計算出分頁數。
                    limits: [10, 20, 50],//每頁條數的選擇項
                    layout: ['prev', 'page', 'next', 'limit', 'limits'],
                    theme: '#F457F2', //自定義主題
                    jump: function (obj) {//模擬渲染
                        document.getElementById('city_list').innerHTML = function () {
                            let arr = [];
                            let thisData = data.concat().splice(obj.curr * obj.limit - obj.limit, obj.limit);
                            layui.each(thisData, function (index, item) {
                                arr.push('<li>' + item + '</li>');
                            });
                            return arr.join('');
                        }();
                    }
                });
            });
        </script>
    </body>
</html>

效果

服務器端真分頁

服務器端代碼

數據庫腳本

CREATE TABLE `tb_dept`  (
  `deptno` tinyint(2) UNSIGNED NOT NULL  COMMENT '部門編號',
  `dname` varchar(14) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '部門名稱',
  `loc` varchar(13) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL COMMENT '部門地址',
  PRIMARY KEY (`deptno`) USING BTREE
) ENGINE = InnoDB  CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Dynamic;

Maven依賴

<dependency>
    <groupId>junit</groupId>
    <artifactId>junit</artifactId>
    <version>4.12</version>
</dependency>
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>8.0.18</version>
</dependency>
<dependency>
    <groupId>javax</groupId>
    <artifactId>javaee-api</artifactId>
    <version>8.0.1</version>
</dependency>
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>fastjson</artifactId>
    <version>1.2.62</version>
</dependency>

Dept.java

public class Dept {
    private Integer deptno;
    private String dname;
    private String loc;

    //……getter/setter、默認構造方法、全參構造方法
}

PageBean.java

public class PageBean<T> {
    /**
     * 每頁顯示的條數
     */
    private long pageSize = 10;
    /**
     * 當前的頁碼
     */
    private long pageNum;
    /**
     * 一共有多少條記錄
     */
    private long total;
    /**
     * 一共有多少頁
     */
    private long pages;
    /**
     * 每一頁所顯示的數據
     */
    private List<T> records;

    //……getter/setter、默認構造方法、全參構造方法
}

DBUtil.java

public final class DBUtil {
    private static final String url = "jdbc:mysql://localhost:3306/db_test?useSSL=false&serverTimezone=GMT%2B8";//連接字符串
    private static final String name = "root";    //用戶名
    private static final String pass = "root"; //密碼

    static {// 1、加載驅動
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
        } catch (ClassNotFoundException e) {
            throw new ExceptionInInitializerError(e);
        }
    }

    public static Connection getConnection() throws SQLException {
        return DriverManager.getConnection(url, name, pass);
    }
     public static void free(ResultSet rs, Statement stmt, Connection conn) {
        try { // 建議採用這種形式來釋放資源，因爲finally裏面的一定會被釋放
            if (rs != null) {
                rs.close();
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            try {
                if (stmt != null) {
                    stmt.close();
                }
            } catch (SQLException e) {
                e.printStackTrace();
            } finally {
                if (conn != null) {
                    try {
                        conn.close();
                    } catch (SQLException e) {
                        e.printStackTrace();
                    }
                }
            }
        }
    }
}

DeptService.java

public class DeptService {
    public List<Dept> getAll() throws SQLException {
        List<Dept> depts = new ArrayList<>();
        Connection conn = DBUtil.getConnection();
        String sql = "select * from tb_dept";
        PreparedStatement ps = conn.prepareStatement(sql);
        ResultSet rs = ps.executeQuery();
        while (rs.next()) {
            depts.add(new Dept(rs.getInt("deptno"), rs.getString("dname"), rs.getString("loc")));
        }
        return depts;
    }

    public List<Dept> getWithPage(Integer pageNum, Integer pageSize) throws SQLException {
        List<Dept> depts = new ArrayList<>();
        Connection conn = DBUtil.getConnection();
        String sql = "select * from tb_dept limit ?,?";
        PreparedStatement ps = conn.prepareStatement(sql);
        ps.setInt(1, (pageNum - 1) * pageSize);
        ps.setInt(2, pageSize);
        ResultSet rs = ps.executeQuery();
        while (rs.next()) {
            depts.add(new Dept(rs.getInt("deptno"), rs.getString("dname"), rs.getString("loc")));
        }
        DBUtil.free(rs,ps,conn);
        return depts;
    }

    public int count() throws SQLException {
        Connection conn = DBUtil.getConnection();
        String sql = "select count(*) from tb_dept";
        PreparedStatement ps = conn.prepareStatement(sql);
        ResultSet rs = ps.executeQuery();
        rs.next();
        int res = rs.getInt(1);
        DBUtil.free(rs,ps,conn);
        return res;
    }
}

DeptServlet

@WebServlet(urlPatterns = "/dept")
public class DeptServlet extends HttpServlet {

    private DeptService deptService = new DeptService();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String op = req.getParameter("op");
        PrintWriter out = resp.getWriter();
        switch (op) {
            case "getAll":
                try {
                    getAll(out);
                } catch (SQLException e) {
                    e.printStackTrace();
                }
                break;
            case "getWithPage":
                try {
                    getWithPage(req, out);
                } catch (SQLException e) {
                    e.printStackTrace();
                }
                break;
            default:
                break;
        }
        out.flush();
    }

    private void getWithPage(HttpServletRequest req, PrintWriter out) throws SQLException {
        int pageNum = Integer.parseInt(req.getParameter("pageNum"));
        int pageSize = Integer.parseInt(req.getParameter("pageSize"));
        List<Dept> depts = deptService.getWithPage(pageNum, pageSize);
        PageBean<Dept> pageBean = new PageBean<>();
        pageBean.setPageNum(pageNum);
        pageBean.setPageSize(pageSize);
        pageBean.setRecords(depts);

        int count = deptService.count();
        pageBean.setTotal(count);
        pageBean.setPageSize(count % pageSize == 0 ? count / pageSize : count / pageSize + 1);
        out.write(JSON.toJSONString(pageBean));
    }

    private void getAll(PrintWriter out) throws SQLException {
        List<Dept> depts = deptService.getAll();
        PageBean<Dept> pageBean = new PageBean<>();
        pageBean.setRecords(depts);
        out.write(JSON.toJSONString(pageBean));
    }
}

前端頁面代碼

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="layui/css/layui.css">
        <script src="layui/layui.js"></script>
        <script src="layui/jquery.js"></script>
    </head>
    <body>
        <table class="layui-table">
            <thead>
                <tr>
                    <th>部門編號</th>
                    <th>部門名稱</th>
                    <th>部門地址</th>
                </tr>
            </thead>
            <tbody>
                <!-- 存放分頁加載數據-->
            </tbody>
        </table>
        <div id="laypage"></div>

        <script type="text/javascript">
            $(function () {
                showData()  //請求數據
                showPage()     //分頁操作
            });

            let pageNum = 1; //設置首頁頁碼
            let pageSize = 5;  //設置一頁顯示的條數
            let total;    //總條數
            let  pages; //一共多少頁

            function showData() {
                $.ajax({
                    type: "get",
                    url: "http://localhost:8080/LayuiDemo/dept?op=getWithPage",//對應controller的URL
                    async: false,
                    dataType: 'json',
                    data: {
                        "pageNum": pageNum,
                        "pageSize": pageSize,
                    },
                    success: function (res) {
                        total = res.total;  //設置總條數
                        pages =  res.pages;
                        console.log(res);
                        let depts = res.records;
                        let html = '';
                        for (let i = 0; i < depts.length; i++) {
                            html += '<tr>';
                            html += ' <td>';
                            html += '     <span>' + depts[i].deptno + '</span>';
                            html += ' </td>';
                            html += ' <td>';
                            html += '     <span>' + depts[i].dname + '</span>';
                            html += ' </td>';
                            html += ' <td>';
                            html += '     <span>' + depts[i].loc + '</span>';
                            html += ' </td>';
                            html += '</tr>';
                        }
                        console.log(html)
                        $("tbody").empty().append(html);
                    }
                });
            }
            function showPage() {
                layui.use('laypage', function () {
                    let laypage = layui.laypage;
                    //執行一個laypage實例
                    laypage.render({
                        elem: 'laypage',  //注意laypage是 ID，不用加 # 號
                        count: total, //數據總數，從服務端得到
                        limit: pageSize,   //每頁條數設置
                        limits: [10, 20, 30],			//可選每頁顯示條數
                        curr: 1,                      //起始頁
                        groups: 3,                     //連續頁碼個數
                        prev: '上一頁',               //上一頁文本
                        next: '下一頁',                //下一頁文本
                        first: 1,                    //首頁文本
                        last: pages,                   //尾頁文本
                        layout: ['prev', 'page', 'next', 'limit', 'refresh', 'skip'],
                        jump: function (obj, first) {  //觸發分頁後的回調
                            //obj包含了當前分頁的所有參數，第一次加載first爲true
                            console.log(obj.curr); //得到當前頁，以便向服務端請求對應頁的數據。
                            console.log(obj.limit); //得到每頁顯示的條數
                            pageNum = obj.curr;  //改變當前頁碼
                            pageSize = obj.limit;
                            //首次不執行，一定要加此判斷，否則初始時會無限刷新
                            if (!first) {
                                showData()  //加載數據
                            }
                        }
                    });
                });
            }
        </script>
    </body>

</html>

效果：

layui 之 laypage分頁插件

理論

示例

模擬測試

代碼

效果

服務器端真分頁

服務器端代碼

前端頁面代碼

lightdb hash index的性能和限制

Intellij 構建基於gradle的SpringBoot項目

Thymeleaf 變量、運算符、表達式

SpringBoot 集成Spring AOP

SpringBoot 統一頁面異常處理

Thymeleaf 模板佈局

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結