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

<!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. Enum service under CentOS7

    service --status all systemctl list-unit-files

  2. Java singleton 一例

    org.springframework.beans.factory.support.DefaultListableBeanFactory - Returning cached instance of ...

  3. mysql复杂查询1

    https://blog.csdn.net/fly910905/article/details/79846949

  4. ubunut下使用kubeadm离线安装k8s1.9

    模仿转载的那个博客,简单记录下过程. 需要的文件. 原贴里面的:http://www.bladewan.com/2018/01/02/kubernetes_install/ 镜像文件,以及单独下载一些 ...

  5. 【转帖】intel 2018年1 月2号爆出漏洞分析 知乎匿名用户

    作者:匿名用户链接:https://www.zhihu.com/question/265012502/answer/288407097来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...

  6. Qt__状态栏(statusBar)

    转自豆子空间 状态栏位于主窗口的最下方,提供一个显示工具提示等信息的地方.一般地,当窗口不是最大化的时候,状态栏的右下角会有一个可以调节大小的控制点:当窗口最大化的时候,这个控制点会自动消失.Qt提供 ...

  7. insertBefore()，appendChild()创建添加列表实例

    定义: insertBefore() 方法在您指定的已有子节点之前插入新的子节点. 语法: 父级.insertBefore(新的子节点,指定的已有子节点) 实例: <input id=" ...

  8. python之random函数

    # random各种使用方法 import random # 随机生成[0.1)的浮点数 print("random():", random.random()) # 随机生成100 ...

  9. 【gridview增删改查】数据库查询后lodop打印

    ASP.NET中使用gridview可以很容易的把需要的数据动态显示在前台,还可以在表格里加入列进行增删改查,每次点击的时候重新加载数据,gridview也提供了分页等功能,还有一些模版让显示在前台的 ...

  10. appium使用错误集合

    原因:没有加载该文件 解决方案: cmd 使用:adb shell uiautomator dump 在cmd生成   然后就可以获取元素了 使用send_keys()输入报错  selenium.c ...