jqueryPagination 前端分页插件

JqueryPagination是一个轻量级的jquery分页插件。只需几个简单的配置就可以生成分页控件。并且支持ajax获取数据，自定义请求参数，提供多种方法，事件和回调函数，功能全面的分页插件。
有需求的可以私信或者评论博主。

文件

QQ截图20200310180744.png

index.html代码

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" href="css/jquery.pagination.css" />
        <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
        <script src="js/jquery.pagination.min.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            body {
                font-family: "微软雅黑";
                background: #eee;
            }
            
            button {
                display: inline-block;
                padding: 6px 12px;
                font-weight: 400;
                line-height: 1.42857143;
                text-align: center;
                vertical-align: middle;
                cursor: pointer;
                border: 1px solid transparent;
                border-radius: 4px;
                border-color: #28a4c9;
                color: #fff;
                background-color: #5bc0de;
                margin: 20px 20px 0 0;
            }
            
            .box {
                width: 800px;
                margin: 100px auto 0;
                height: 34px;
            }
            
            .page {
                width: 600px;
            }
            
            .info {
                width: 200px;
                height: 34px;
                line-height: 34px;
            }
            
            .fl {
                float: left;
            }
        </style>
    </head>

    <body>
        <div class="box">
            <div id="pagination1" class="page fl"></div>
            <div class="info fl">
                <p>当前页数：<span id="current1">1</span></p>
            </div>
        </div>
        <div class="box">
            <div id="pagination2" class="page fl"></div>
            <div class="info fl">
                <p>当前页数：<span id="current2">3</span></p>
            </div>
        </div>
        <div class="box">
            <div id="pagination3" class="page fl"></div>
            <div class="info fl">
                <p>当前页数：<span id="current3">4</span></p>
            </div>
            <button id="getPage">getPage</button>
            <button id="setPage">setPage</button>
        </div>

        <script>
            $(function() {
                $("#pagination1").pagination({
                    currentPage: 1,
                    totalPage: 12,
                    callback: function(current) {
                        $("#current1").text(current)
                    }
                });

                $("#pagination2").pagination({
                    currentPage: 3,
                    totalPage: 12,
                    isShow: false,
                    count: 6,
                    prevPageText: "< 上一页",
                    nextPageText: "下一页 >",
                    callback: function(current) {
                        $("#current2").text(current)
                    }
                });

                $("#pagination3").pagination({
                    currentPage: 4,
                    totalPage: 16,
                    isShow: true,
                    count: 7,
                    homePageText: "首页",
                    endPageText: "尾页",
                    prevPageText: "上一页",
                    nextPageText: "下一页",
                    callback: function(current) {
                        $("#current3").text(current)
                    }
                });

                $("#getPage").on("click", function() {
                    var info = $("#pagination3").pagination("getPage");
                    alert("当前页数：" + info.current + ",总页数：" + info.total);
                });

                $("#setPage").on("click", function() {
                    $("#pagination3").pagination("setPage", 1, 10);
                });
            });
        </script>
    </body>

</html>

页面效果

QQ截图20200310180900.png

jqueryPagination 前端分页插件

文件

index.html代码

页面效果

如若时光萧瑟去丶

引用和评论

nginx 负载均衡的实现

100个React最佳实践小技巧

前端如何入门 Go 语言

前端开发工具

开发插件集合

Javascript(turfjs)等值线图绘制

JS校验身份证号