jquery扩展代码少的分页bar

直接上图，上代码了，代码量少，不解释那么多了

 

?
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="http://common.cnblogs.com/script/jquery.js"></script>
    <script type="text/javascript">
        //生成Pager，{ pageNum: 5, total: 132, pageSize:10, viewSize: 10, click: function(pn){ } };
        $.fn.pager = function (ops) {
            ops = $.extend({ pageNum: 1, total: 100, pageSize: 10, viewSize: 9, click: function (pn) { } }, ops);  
            var pt = parseInt(ops.total / ops.pageSize + (ops.total % ops.pageSize == 0 ? 0 : 1));
            var arr = ['<a class="first" href="javascript:;">首页</a>'];
            var left = parseInt(ops.pageNum > (ops.viewSize / 2) ? (ops.viewSize / 2) : ops.pageNum);
            var start = ops.pageNum - left <= 0 ? 1 : ops.pageNum - left;
            for (var i = start; i <= start + ops.viewSize && i <= pt; i++)
                arr.push('<a class="' + (i == ops.pageNum ? 'current' : '') + '" href="javascript:;">' + i + '</a>');
            arr.push('<a class="last" href="javascript:;">末页</a>');
            $(this).html(arr.join(''));
            $(this).find('a').click(function () {
                var pn = $(this).text();
                pn = pn == '首页' ? 1 : pn;
                pn = pn == '末页' ? pt : pn;
                ops.click(parseInt(pn));
            });
            return ops;
        }
 
        onload = function () {
            var ops = $('.pager').pager({
                pageNum: 1, total: 163, pageSize: 10, viewSize: 9, click: function (pn) {
                    ops.pageNum = pn;
                    $('.pager').pager(ops);
                }
            });
        }
    </script>
    <style>
        .pager {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            border: 1px solid #dddddd;
            border-radius: 3px;
            display: inline-block;
            clear: both;
        }
 
            .pager a, .pager span {
                font-size: 14px;
                color: #428bca;
                border-right: 1px solid #dddddd;
                padding: 4px 9px;
                float: left;
                text-decoration: none;
            }
 
            .pager span {
                color: #fff;
                background: #428bca;
            }
 
            .pager a:hover {
                color: #2a6496;
                background: #f2f2f2;
            }
 
            .pager a.last {
                border-right: 0;
            }
 
            .pager a.current{
                color:#333;
            }
    </style>
</head>
<body>
    <div>asd</div>
    <div style="text-align:center">
        <div class="pager"></div>
    </div>
    <div>asd</div>
</body>
</html>

　　

posted @   搵中求胜  阅读(513)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
点击右上角即可分享
微信分享提示
AI FOR CODE 大赛