基于jquery的分页器插件Pagination.js

bin9153

于 2024-05-21 17:16:51 发布

阅读量209

点赞数 4

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/qq_33650655/article/details/139092890

版权

1.分页器的组成：

根据官网介绍：整体把分页器分成3部分：

导航器（formatNavigator），页码器（PageNumbers），跳转器（GoInput）。

根据需要对这三部分进行设置。官网地址：Pagination.js | Home

默认只显示页码器。

完整版代码，如下。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link href="./dist/2.6.0/pagination.css" rel="stylesheet">
    <title>Pagination.js | Normal(普通的)</title>
    <style>
        ul, li {
            list-style: none;
        }

        .data-container ul {
            padding: 0;
            margin: 0;
        }

        .data-container li {
            margin-bottom: 5px;
            padding: 5px 10px;
            background: #eee;
            color: #666;
        }
    </style>
</head>
<body>
<h1 style="text-align: center">完整的分页器格式</h1>
<h1 style="text-align: center;">官网地址： <a href="https://pagination.js.org/index.html">这里</a></h1>
<div id="Normal-demo1">
    <!--    当前数据标签 显示数据-->
    <div id="data-container"></div>
    <!--    页码标签 显示页码-->
    <div id="pagination-container"></div>
</div>
</body>

<script type="text/javascript" src="./js/jquery-3.6.1.min.js"></script>
<script type="text/javascript" src="./dist/2.6.0/pagination.min.js"></script>
<script>
    // Normal-普通版
    // 参数默认
    // direction:0
    // pageNumber:1  指定初始化时加载哪一页的数据
    // pageRange:2   可见的页码范围，即当前页码两边的页码数量。比如当前是第 6 页，设置 pageRange 为 2，则页码条显示为
    // pageSize:10   每页的条目数
    // totalNumber:30  目总数，异步分页时必填，模拟分页时为数组的长度
    $(function () {
        // 数据
        var dataArr = [
            1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
            11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
            21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
            31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
            41, 42, 43, 44, 45, 46, 47, 48, 49, 50
        ];
        // 数据容器jquery对象  是jQ对象 本插件是基于jQ的
        var dataContainer = $('#data-container');
        // 分页容器jquery对象
        var paginationContainer = $('#pagination-container');

        // 处理数据的方式  数据解析的参数 把数据
        var dataOptions = {
            dataSource: dataArr,
            pageSize: 3,
            pageRange: 1,

            //格式化导航器  分页器前面的改变
            showNavigator: true,
            formatNavigator: '<%= rangeStart %>-<%= rangeEnd %> of <%= totalNumber %> items',
            position: 'top',

            //格式化go和input 分页器后面的改变
            showGoInput: true,
            showGoButton: true,
            formatGoInput: 'go to <%= input %> st/rd/th',

            callback: function (responseData, pagination) {
                window.console && console.log(responseData, pagination);
                var dataHtml = '<ul>';

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

                //把 当前页 的数据 放到 数据容器 里
                dataContainer.html(dataHtml);

            }
        }
        // 用插件的pagination 方法 把 数据(dataOptions) 放到 数据容器里 (dataContainer)
        // 把 分页 的数据放到 分页容器 里
        paginationContainer.pagination(dataOptions)
    })
</script>


</html>

下载完整代码，https://download.csdn.net/download/qq_33650655/89335895。

一般普通的就够用了。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link href="./dist/2.6.0/pagination.css" rel="stylesheet">
    <title>一般使用案例</title>
    <style>
        ul, li {
            list-style: none;
        }

        .data-container ul {
            padding: 0;
            margin: 0;
        }

        .data-container li {
            margin-bottom: 5px;
            padding: 5px 10px;
            background: #eee;
            color: #666;
        }
    </style>
</head>
<body>
<h1 style="text-align: center">一般使用案例</h1>
<h1 style="text-align: center;">官网地址： <a href="https://pagination.js.org/index.html" target="_blank">这里</a></h1>
<div id="Normal-demo1">
    <!--    当前数据标签 显示数据-->
    <div id="data-container"></div>
    <!--    页码标签 显示页码-->
    <div id="pagination-container"></div>
</div>
</body>

<script type="text/javascript" src="./js/jquery-3.6.1.min.js"></script>
<script type="text/javascript" src="./dist/2.6.0/pagination.min.js"></script>
<script>
    // Normal-普通版
    // 参数默认
    // direction:0
    // pageNumber:1  指定初始化时加载哪一页的数据
    // pageRange:2   可见的页码范围，即当前页码两边的页码数量。比如当前是第 6 页，设置 pageRange 为 2，则页码条显示为
    // pageSize:10   每页的条目数
    // totalNumber:30  目总数，异步分页时必填，模拟分页时为数组的长度
    $(function () {
        // 数据
        var dataArr = [
            1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
            11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
            21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
            31, 32, 33, 34, 35, 36, 37, 38, 39, 40,
            41, 42, 43, 44, 45, 46, 47, 48, 49, 50
        ];
        // 数据容器jquery对象  是jQ对象 本插件是基于jQ的
        var dataContainer = $('#data-container');
        // 分页容器jquery对象
        var paginationContainer = $('#pagination-container');

        // 处理数据的方式  数据解析的参数 把数据
        var dataOptions = {
            dataSource: dataArr,
            pageSize: 3,
            pageRange: 1,

            callback: function (responseData, pagination) {
                window.console && console.log(responseData, pagination);
                var dataHtml = '<ul>';

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

                //把 当前页 的数据 放到 数据容器 里
                dataContainer.html(dataHtml);

            }
        }
        // 用插件的pagination 方法 把 数据(dataOptions) 放到 数据容器里 (dataContainer)
        // 把 分页 的数据放到 分页容器 里
        paginationContainer.pagination(dataOptions)
    })
</script>


</html>