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

<!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>

　　

jquery扩展代码少的分页bar的更多相关文章

  1. 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了，同一个页面可以调用多个

    自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...

  2. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  3. Python之Web前端jQuery扩展

    Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...

  4. 26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展

    本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱 ...

  5. 使用jquery获取url及url参数的方法及定义JQuery扩展方法

    1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识. 2.jquery获取 ...

  6. jQuery EasyUI datagrid实现本地分页的方法

    http://www.codeweblog.com/jquery-easyui-datagrid%e5%ae%9e%e7%8e%b0%e6%9c%ac%e5%9c%b0%e5%88%86%e9%a1% ...

  7. [转] jQuery Infinite Ajax Scroll(ias) 分页插件介绍

    原文链接:http://justflyhigh.com/index.php/articlec/index/index.php?s=content&m=aticle&id=91 Infi ...

  8. Jquery扩展-手把手带你体验

    Jquery扩展是在项目中经常用到的,有时候为了提取一些公共方法,有时候为了模块化管理等等,下面我们来体验一下.当然扩展离不开Jquery几个基础方法 1:$.extend() 2:$.fn.func ...

  9. jquery扩展 $.fn

    $.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个 ...

随机推荐

  1. python学习笔记七——字典

    4.3 字典结构 字典是Python中重要的数据类型,字典的由“键-值”对组成的集合,字典中的“值”通过“键”来引用. 4.3.1 字典的创建 字典由一系列的“键-值”(key-value)对组成,“ ...

  2. SQL 事务 begin tran、commit tran、rollback tran 的用法

    首先理解一下这三个事务的大概意思: begin Transaction 可以理解成新建一个还原点. commit Transaction 提交这个自begin tran开始的修改 rollback T ...

  3. Lights inside a 3d Grid UVA - 11605(概率)

    题意: 给出一个n * m * h的空间 每次任意选择两个点  使得在以这两个点连线为对角线的空间的点的值 取反  (初始为0) 求经过k次操作后最后有多少点的值为1 解析: 遇到坐标分维去看  把三 ...

  4. 2018 CCPC网络赛 1010 hdu 6447 ( 树状数组优化dp)

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=6447 思路:很容易推得dp转移公式:dp[i][j] = max(dp[i][j-1],dp[i-1][j ...

  5. MT【230】一道代数不等式

    设$a,b,c>0,$满足$a+b+c\le abc$证明:$\dfrac{1}{\sqrt{1+a^2}}+\dfrac{1}{\sqrt{1+b^2}}+\dfrac{1}{\sqrt{1+ ...

  6. 【POJ 2823】Sliding Window（单调队列/堆）

    BUPT2017 wintertraining(16) #5 D POJ - 2823 题意 给定n,k,求滑窗[i,i+k-1]在(1<=i<=n)的最大值最小值. 题解 单调队列或堆. ...

  7. poj3114 Contries in War (tarjan+dijkstra)

    缩完点后对每次询问做dijkstra即可 #include<cstdio> #include<cstring> #include<algorithm> #inclu ...

  8. Android微信数据导出

    在Nexus 5(Android 4.4)+WeChat 5.4,和Nexus 5(Android 5.0)+Wechat 6.0上测试可用. 获取加密的sqlite3数据库EnMicroMsg.db ...

  9. ->2018.06 计划

    2018.4.14->2018.06计划 力求掌握以下几种算法: 树链剖分 网络流 主席树 splay 莫队

  10. Chrome 下，重复使用 XMLHttpRequest进行Post数据时，遇到一个奇怪的问题

    var http_request; //在外面申明对象,主要为了在updatePage中使用     //无刷新更新内容 function post(url,parameter) {        i ...