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

<!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的使用1

    Vue.$set(object, key, value); <!-- Alt + C --> <input @keyup.alt.="clear"> < ...

  2. TFS2018 linux Agent的安装

    1. 感谢徐蕾老师的文档,根据文档简单学会了TFS agent的安装,在此简单记录一下: 前置条件: CentOS7.4 or CentOS7.5的版本 安装的软件有git 2.17 dotnet s ...

  3. Windows系统下PHP使用Redis

    参考链接:https://www.cnblogs.com/lhat/p/6402472.html 环境:windows 10  64位操作系统    php 5.4 redis 3.0 1.redis ...

  4. 《ERP系统修正数据的sql文件》

    第一 1.修正销售客户创建者的sql脚本: UPDATE e_sales_customers sc SET sc.user_id = ( SELECT tmp.user_id FROM ( SELEC ...

  5. html 塊 div span

    塊級元素:元素結束后,另起一行:如p,table,h1,ul,ol 內聯元素:元素結束后,不會另起一行:如a,td.image.b <div>是塊級元素,div本身沒有含義,div是htm ...

  6. JDK8字符串拼接的正确姿势

    1. 对列表中的元素进行拼接 以前,对一个列表中的字符串进行拼接时,常见的代码如示例1所示: 代码示例1 List<String> ids = ImmutableList.of(" ...

  7. 【题解】N皇后

    题目描述 相信大家都听过经典的“八皇后”问题吧?这个游戏要求在一个8×8的棋盘上放置8个皇后,使8个皇后互相不攻击(攻击的含义是有两个皇后在同一行或同一列或同一对角线上). 桐桐对这个游戏很感兴趣,也 ...

  8. BZOJ1022[SHOI2008]小约翰的游戏——anti-SG(反尼姆博弈)

    题目描述 小约翰经常和他的哥哥玩一个非常有趣的游戏:桌子上有n堆石子,小约翰和他的哥哥轮流取石子,每个人取的时候,可以随意选择一堆石子,在这堆石子中取走任意多的石子,但不能一粒石子也不取,我们规定取到 ...

  9. HDU1069 最长上升子序列

    emm....矩形嵌套 还记得吗....就是它... 直接贴代码了.... import java.util.ArrayList; import java.util.Arrays; import ja ...

  10. bzoj 4552 [Tjoi2016&Heoi2016]排序 (二分答案 线段树)

    题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=4552 题意: 给你一个1-n的全排列,m次操作,操作由两种:1.将[l,r]升序排序,2 ...