jquery扩展代码少的分页bar
直接上图,上代码了,代码量少,不解释那么多了
<!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的更多相关文章
- 自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个
自己改写了一个图片局部放大的jquery插件页面里面的html代码少了,同一个页面可以调用多个,兼容ie8以上浏览器,别忘了引用jquery,我用的jquery/1.11.0/其他版本没有测试,另外需 ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- Python之Web前端jQuery扩展
Python之Web前端: 一. jQuery表单验证 二. jQuery扩展 三. 滚动菜单 一. jQuery表单验证: 任何可以交互的站点都有输入表单,只要有可能,就应该对用户输入的数据进行验证 ...
- 26、ASP.NET MVC入门到精通——后台管理区域及分离、Js压缩、css、jquery扩展
本系列目录:ASP.NET MVC4入门到精通系列目录汇总 有好一段时间没更新博文了,最近在忙两件事:1.看书,学习中...2.为公司年会节目做准备,由于许久没有练习双截棍了,难免生疏,所以现在临时抱 ...
- 使用jquery获取url及url参数的方法及定义JQuery扩展方法
1.jquery获取url很简单,代码如下: window.location.href; 其实只是用到了javascript的基础的window对象,并没有用jquery的知识. 2.jquery获取 ...
- 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% ...
- [转] jQuery Infinite Ajax Scroll(ias) 分页插件介绍
原文链接:http://justflyhigh.com/index.php/articlec/index/index.php?s=content&m=aticle&id=91 Infi ...
- Jquery扩展-手把手带你体验
Jquery扩展是在项目中经常用到的,有时候为了提取一些公共方法,有时候为了模块化管理等等,下面我们来体验一下.当然扩展离不开Jquery几个基础方法 1:$.extend() 2:$.fn.func ...
- jquery扩展 $.fn
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个 ...
随机推荐
- 数组操作方法(包括es5)
//push(); 定义:可以可向数组的末尾添加一个或更多元素,并返回新的长度. 方法:push(); 语法:数组.push(新元素1,新元素2,....,新元素x) 返回值:把指定的值添加到数组后的 ...
- [学习笔记]Ubuntu下安装配置SQLSERVER2017
摘要自微软官网: https://docs.microsoft.com/zh-cn/sql/linux/quickstart-install-connect-ubuntu 安装步骤: 1. 导入公共秘 ...
- ubuntu查看本地ip
1.下载net-tools sudo apt-get install net-tools 2.终端输入命令 ifconfig
- python删除数组元素导致跳过元素
复现的情况大概可以写成这样 abc = [1, 2, 2, 3, 4] print abc for index, i in enumerate(abc): if i == 2: del abc[ind ...
- HashMap的实现原理--链表散列
1. HashMap概述 HashMap是基于哈希表的Map接口的非同步实现.此实现提供所有可选的映射操作,并允许使用null值和null键.此类不保证映射的顺序,特别是它不保证该顺序恒久不变. ...
- Lodop设置打印维护返回打印语句代码
打印设计关闭时,可以返回设计的打印代码,打印维护则返回成功打印的次数.不过打印维护也是返回打印程序代码的,方法就是加个语句,这个语句是: LODOP.SET_PRINT_MODE("PRIN ...
- File操作
对文件进行操作(只操作小文件) bool Exists(string path) 判断文件是否存在 FileStream Create(string path) 创建文件 void Move(stri ...
- 自学huawei之路-AC6005版本升级步骤
返回自学Huawei之路 自学huawei之路-AC6005版本升级步骤 本文主要采用WEB网管界面升级,方便快捷,推荐使用此方法. 一.升级前检查 1.1 原AC/AP设备版本确认 disp ...
- 【BZOJ4555】求和(多种解法混合版本)
[BZOJ4555]求和(多种解法混合版本) 题面 BZOJ 给定\(n\),求 \[f(n)=\sum_{i=0}^{n}\sum_{j=0}^{i}S(i,j)\times 2^j \times ...
- BZOJ 4004 [JLOI2015]装备购买 | 线性基
题目链接 Luogu P3265 题解 非常正常的线性基! 但是我不会线性基-- (吐槽:#define double long double 才过--) #include <cstdio> ...