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

<!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. ThinkPad E470 win10，重装win10专业版后无声音

    解决办法: 1.官网下载笔记本对应的声卡驱动并安装 2.下载热键驱动并安装 3.重启笔记本即可 参考:https://blog.csdn.net/u012369373/article/details/ ...

  2. ubuntu安装命令

    sudo apt-get update  更新源sudo apt-get install package 安装包sudo apt-get remove package 删除包sudo apt-cach ...

  3. QueryParser 是对一段话进行分词的 用于收集客户端发来的

  4. 洛谷 P1392 取数

    题面 在做这道题前,先要会他的弱化版(实际一模一样,只是愚蠢的洛谷评测级别差了一档(睿智如姬无夜)) ----------------------------------弱化版------------ ...

  5. 百度/头条合作命中注定！中国新BAT要来了

    据外媒报道,今日头条母公司字节跳动(ByteDace)将为中国互联网传统BAT的格局,带来一些新的活力.这家增速飞快的新闻.视频App“制造者”已经估值高达750亿美元,与三巨头之一的百度平起平坐,后 ...

  6. Linux LVM逻辑卷配置过程详解（创建，增加，减少，删除，卸载）

    Linux LVM逻辑卷配置过程详解 许多Linux使用者安装操作系统时都会遇到这样的困境:如何精确评估和分配各个硬盘分区的容量,如果当初评估不准确,一旦系统分区不够用时可能不得不备份.删除相关数据, ...

  7. JPQL模糊匹配单个字符

    JPQL模糊匹配,不是%,而是单个字符,该怎么办?比如我要查出数据库中满足后三位是数字的字符串 对于mysql来说,使用通配符 %和_可以轻松解决,但是对于JPQL来说模糊查询就伤脑筋了... 有一个 ...

  8. HNOI2017礼物

    礼物 这估计是最水,最无脑的一道题了 首先发现总和最接近时答案最小 发现答案就是\((\sum_{i=1}^{n}a[i]^2+b[i]^2)-2*max(\sum_{i=1}^{n}a[i]*b[i ...

  9. [luogu3455][POI2007]ZAP-Queries【莫比乌斯反演】

    题目描述 FGD正在破解一段密码,他需要回答很多类似的问题:对于给定的整数a,b和d,有多少正整数对x,y,满足x<=a,y<=b,并且gcd(x,y)=d.作为FGD的同学,FGD希望得 ...

  10. 逆向---02.je & jmp & jnz 、OD调试

    上一篇:逆向---01.Nop.中文字符串搜索.保存修改后程序 OD调试基础:(01.02篇练手工具:https://pan.baidu.com/s/1kW2qlCz) nop是删除跳转,你别问我,我 ...