Paginationjs 插件 Ajax 请求分页数据

上一文说到过 Paginationjs 插件简单使用，它只是针对于少量数据。

Paginationjs 插件也支持 Ajax 请求数据。

在使用前，配置2个 div，一个用于展示分页，一个用于展示数据。

如，msg_page 和 msg_list。之后，通过 dataSource 设置请求链接，通过 callback 对这里数据进行处理。

根据需要：通过 alias 配置分页参数别名，locator 指定列表数据属性，totalNumberLocator 设置总记录数。

<!DOCTYPE html>
<html>
<head>
    <title>Paginationjs 插件简单使用</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="http://pagination.js.org/dist/2.6.0/pagination.css" rel="stylesheet" type="text/css">
    <style type="text/css">
        ul, li {
            list-style: none;
        }

        #wrapper {
            width: 900px;
            margin: 20px auto;
        }
    </style>
</head>
<body>

<div id="wrapper">
  <section>

    <div class="msg_page"></div>
    <div class="msg_list"></div>

  </section>
</div>

<script src="http://code.jquery.com/jquery-3.6.1.js"></script>
<script src="http://pagination.js.org/dist/2.6.0/pagination.js"></script>
<script>
$(function() {

    // Ajax 分页
    $('#msg_page').pagination({
        // 配置分页参数别名
        alias: {
            pageNumber: 'pageNo', // 第几页
            pageSize: 'pageSize' // 分页大小
        },
        // 请求地址
        dataSource: '/msg/listData',
        // 响应后，哪个属性是数据项
        locator: 'list',
        // 响应后，获取总记录数
        totalNumberLocator: function (response) {
            return response.count;
        },
        // 分页大小
        pageSize: 6,
        // 配置分页展示效果
        ulClassName: "pagination pagination-sm inline",
        // 分页数据处理
        callback: function (response, pagination) {
            let msgList = [];
            let data;

            msgList.push("<ul class=\"todo-list ui-sortable\">")
            for (const x in response) {
                data = response[x];
                msgList.push("<span>" + data["title"] + "</span>");
            }

            msgList.push("</ul>");

            // 渲染列表
            $("#msg_list").html(msgList.join(""));
        }
    });
</script>
</body>
</html>

相关文章：