jQuery插件：一个仿百度搜索分页插件

xxpr_ybgg

于 2022-11-10 08:41:32 发布

阅读量157

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/xxpr_ybgg/article/details/127748699

版权

jQuery插件：一个仿百度搜索分页插件，风格可以自己设置，推荐使用bootstrap配合使用。

先贴代码：

(function ($) {
    $.fn.pagination = function (curr, all, count) {
        //容错处理
        if (all <= 0) {
            all = 1;
        }
        if (curr <= 0) {
            curr = 1;
        } else if (curr > all) {
            curr = all;
        }
        //默认显示页数为10
        if (!count) {
            count = 10;
        } else if (count < 1) {
            count = 1;
        }
        //计算显示的页数
        var from = curr - parseInt(count / 2);
        var to = curr + parseInt(count / 2) + (count % 2) - 1;
        //显示的页数容处理
        if (from <= 0) {
            from = 1;
            to = from + count - 1;
            if (to > all) {
                to = all;
            }
        }
        if (to > all) {
            to = all;
            from = to - count + 1;
            if (from <= 0) {
                from = 1;
            }
        }
        //写入（可以根据自己需求修改）
        if (curr > 1) {
            var prev = $("<li><a href='javascript:;'>&laquo;</a></li>");
            this.append(prev);
        }
        for (var i = from; i <= to; i++) {
            if (i == curr) {
                var li = $("<li class='active'><a href='javascript:;'>" + i + "</a></li>");
                this.append(li);
            } else {
                var li = $("<li><a href='javascript:;'>" + i + "</a></li>");
                this.append(li);
            }
        }
        if (curr < all) {
            var prev = $("<li><a href='javascript:;'>&raquo;</a></li>");
            this.append(prev);
        }
    }
})(jQuery);

使用方法

$().pagination(curr,all,count); //方法函数
// $() 是一个jquery对象，如 $(".box")、$("#box")、$("div")
// 参数curr是当前页数
// 参数all表示总页数
// 参数count可选，默认为10，表示显示的最大页数范围

示例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="bootstrap.min.css" /> <!--引用bootstrap css-->
        <script type="text/javascript" src="jquery-2.1.4.min.js"></script> <!--引用jquery-->
        <script type="text/javascript" src="pagination.js"></script> <!--引用分页插件-->
    </head>
    <body>
         <div class="pagination" id="p1"></div> <br>
         <div class="pagination" id="p2"></div> <br>
         <div class="pagination" id="p3"></div> <br>
         <div class="pagination" id="p4"></div> <br>
         <div class="pagination" id="p5"></div> <br>
         <div class="pagination" id="p6"></div>

         <script type="text/javascript">
 $("#p1").pagination(0,30,10);
 $("#p2").pagination(2,5);
 $("#p3").pagination(2,30,10);
 $("#p4").pagination(9,30,10);
 $("#p5").pagination(28,30,10);
 $("#p6").pagination(40,30,10); 
 </script>
    </body>
</html>