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

<!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. Vue 的语法

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. ECSHOP广告调用广告位添加到首页顶部通栏教程

    ECSHOP广告调用广告位添加到首页顶部通栏教程 ECSHOP教程/ ecshop教程网(www.ecshop119.com) 2012-05-26   ECSHOP系统默认预留的广告位很少,如何才能 ...

  3. CentOS7 卸载mariadb 安装mysql的过程:

    1. 检查安装的mariadb rpm -qa |grep mariadb 得到已经安装的安装包 mariadb-libs-5.5.56-2.el7.x86_64mariadb-devel-5.5.5 ...

  4. const修饰符与函数

    一.用const修饰函数的参数 函数参数类型前加const指明该参数为常量,在函数内部不可改变. void func(const int x) { //x不可以在内部进行赋值等操作. } 注:当参数为 ...

  5. mysql学习笔记一 —— 数据的增删改查

    1.连接mysql mysql 直接回车(是以root身份,密码空,登陆的是本机localhost) [root@www mysql]# mysql -uroot -p123 -S /var/lib/ ...

  6. 一本通1585【例 1】Amount of Degrees

    1585: [例 1]Amount of Degrees 时间限制: 1000 ms         内存限制: 524288 KB 题目描述 原题来自:NEERC 2000 Central Subr ...

  7. 最短路径——SPFA算法

    一.前提引入 我们学过了Bellman-Ford算法,现在又要提出这个SPFA算法,为什么呢? 考虑一个随机图(点和边随机生成),除了已确定最短路的顶点与尚未确定最短路的顶点之间的边,其它的边所做的都 ...

  8. Java生成多数值二元运算结果集

    看之前大学写过的24点程序中用到的核心计算算法——计算四个值能否计算出24,当时用的c++写的,现用Java重写一遍 程序实现了多个数值(可重复),每个数值只能运算一次,二元运算的条件下获得所有结果集 ...

  9. day22 collection 模块 (顺便对比queue也学习了一下队列)

    collection 定义命名元祖,让元祖的每个元素可以通过类似对象属性的方法用".属性"及其方便的取值. 定义可前后拿取值且可迭代的双端队列 定义有顺序的字典 定义有默认值的字典 ...

  10. 【BZOJ2426】[HAOI2010]工厂选址（贪心）

    [BZOJ2426][HAOI2010]工厂选址(贪心) 题面 BZOJ 洛谷 题解 首先看懂题目到底在做什么. 然而发现我们显然可以对于每个备选位置跑一遍费用流,然后并不够优秀. 不难发现所有的位置 ...