Paginationjs 插件简单使用

在日常工作中，分页很常用，但有时候，不想让后端处理，改为前端 JS 实现分页效果。

前端分页通常适用于数据量不大的情况；由后端返回全部数据，再由前端分页处理。

在这里推荐 Pagination.js 插件。

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

如，page 和 data_list。之后，通过 dataSource 设置数据，通过 callback 对这里数据进行处理。

<!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="page"></div>
    <div class="data_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() {

    $('.page').pagination({
        // 设置数据
        dataSource: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        // 设置分类大小
        pageSize:2,

        // 设置分页样式
        ulClassName:"pagination pagination-sm inline",

        // 显示导航提示
        showNavigator: true,
        // 配置提示内容
        formatNavigator: '显示 <%= rangeStart %>-<%= rangeEnd %> 条， 共计 <%= totalNumber %>',

        // 显示跳转框
        showGoInput: true,

        // 显示跳转按钮
        showGoButton: true,

        // 配置跳转展示内容
        formatGoInput: '跳转到 <%= input %> 页',

        // 配置跳转按钮文字
        goButtonText: "Go!",

        // 数据处理
        callback: function (response, pagination) {
            var dataHtml = '<ul>';

            $.each(response, function (index, item) {
              dataHtml += '<li>' + item + '</li>';
            });

            dataHtml += '</ul>';
            $(".data_list").html(dataHtml);
      }
    });
});
</script>
</body>
</html>

相关文章：