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

<!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. [日常工作]Win2008r2 以及更高版本的操作系统安装Oracle10.2.0.5

    1. 当时有特殊需求, 客户有win2008r2sp1以上的windows系统,但是数据库要使用Oracle10.2.0.5 的版本. 问题: 1. Oracle10 最高支持到 Win2008sp2 ...

  2. LY tomcat 的闪退问题

    http://www.cnblogs.com/1693977889zz/archive/2018/04/06/8726920.html 在bin文件夹里打开此文件setclasspath.bat 举例 ...

  3. python2 高级编程

    第一 正则表达式 1. 正则表达式意义 正则表达式是高级文本匹配模式,为搜索,匹配,替换提供了基础 2. 搜索与匹配的区别 搜索指在字符串任何部分查找 匹配指在字符串起始处查找 3. 编写正则表达式 ...

  4. JS中Number()，parseInt()，parseFloat()和自动类型转换

    [参考来源] https://www.cnblogs.com/yi0921/p/6196841.html https://blog.csdn.net/u010200222/article/detail ...

  5. Chrome 屏蔽广告

    转载: http://blog.csdn.net/yenange/article/details/76145216 1. 上网站: http://www.adtchrome.com/ Chorme下载 ...

  6. Java 入门进阶

    Java 入门进阶 發表於 2015-04-16 http://xielong.me/2015/04/16/%E6%9C%8D%E5%8A%A1%E7%AB%AF%E5%B7%A5%E7%A8%8B% ...

  7. MT【20】一道三次函数的难题

    评:这道题由于系数弄得不是很好,涉及的难度为联赛一试+难度.中间用到了$Sturm$定理,还涉及到一些代 数变形技巧,最后一个求关于$m$的三次方程又涉及到三次方程的求法.一个小时讲这一道题也不为过.

  8. SharePoint 错误集 2

    1 Run command “New-SPConfigurationDatabase" Feature Description: error message popup after run ...

  9. 【转】cJSON 源码阅读笔记

    前言 cjson 的代码只有 1000+ 行, 而且只是简单的几个函数的调用. 而且 cjson 还有很多不完善的地方, 推荐大家看完之后自己实现一个 封装好的功能完善的 cjson 程序. json ...

  10. SpringCloud学习(二)---Eureka

    Eureka 重点在使用,概念和源码基本不涉及 Eureka是一个基于REST(REST是HTTP协议的)的服务,主要在亚马逊网络服务(AWS)云中使用,定位服务来进行中间层服务器的均衡负载和故障转移 ...