JQuery 分页显示jquery-pager-1.0.js
原版是jquery-pager-1.0.js，经过变更修改加上按照项目中的一些需要修改过来。
//初始化分页控件 PagerOptions为配置参数 url为要提交的url地址，如果不需要提交则可以为null或""
//options 为提交到服务端的参数，如果不提交则传递到callback方法
//callback 方法回调，点击分页按钮时执行 callback返回总数
//如果不提交到服务端，则此callback方法为CallBack(PageIndex,PageSize,Options)
function InitPager(PagerOptions) {
$(PagerOptions.PageId).setPager(PagerOptions);
}
function ReflashPager() {
$("span .page_current").click();
}
(function ($) {
//设定页码方法，初始化
$.fn.setPager = function (PagerOptions) {
var opts = $.extend({}, pagerDefaults, PagerOptions);
return this.each(function () {
$(this).empty().append(PostData(opts));
});
}
//点击事件
function PageClick(PageIndex, opts) {
opts.PageIndex = PageIndex;
$(opts.PageId).setPager(opts);
}
//跳转
function turnTo(i, opts) {
var index = parseInt($('#indexVal' + i).val());
if (index == '' || index == 'undefined' || index <= 0 || index > (parseInt(opts.PageCount % parseInt(opts.PageSize)) > 0 ? parseInt(opts.PageCount / opts.PageSize) + 1 : parseInt(opts.PageCount / opts.PageSize)) || isNaN(index)) {
$('#indexVal' + i).val('')
return;
}
opts.PageIndex = index;
$(opts.PageId).setPager(opts);
}
//执行post数据
function PostData(opts) {
if (opts.Url == null || opts.Url == "") {
if (opts.CallBack != null && opts.CallBack != 'undefined') {
opts.PageCount = opts.CallBack(opts.PageIndex, opts.PageSize, opts.Options);
}
} else {
if (opts.IsShowLoadMovie) {
var top = $(window).height() / 2 + $(document).scrollTop();
var left = $(window).width() / 2 - 80 + $(document).scrollLeft();
var html = "<div style='top:" + top + "px;left:" + left + "px;position:absolute;z-index:1000;' id='ajaxmessage'><img src='/images/loading.gif'></div>";
$("body").append(html);
}
$.ajax({
type: "POST",
dataType: 'json',
async: false,
url: opts.Url + "?pageIndex=" + opts.PageIndex + "&pageSize=" + opts.PageSize,
data: $.param(opts.Options),
success: function (result) {
if (opts.CallBack != null && opts.CallBack != 'undefined') {
opts.PageCount = opts.CallBack(result, opts.PageIndex, opts.PageSize);
}
}, error: function (msg) {
alertmessage("加载数据发生错误，请联系管理员检查服务端！");
opts.PageCount = 1;
}
});
$("#ajaxmessage").remove();
}
return setPagerHtml(opts);
}
//设定页数及html
function setPagerHtml(opts) {
var $content = $("<div class='pages'></div>");
var startPageIndex = 1;
//若页码超出
if (opts.PageCount <= 0) opts.PageCount = 1;
//末页
var endPageIndex = parseInt(opts.PageCount % parseInt(opts.PageSize)) > 0 ? parseInt(opts.PageCount / opts.PageSize) + 1 : parseInt(opts.PageCount / opts.PageSize);
if (opts.PageIndex <= 0) {
opts.PageIndex = 1;
} if (opts.IsShowNumberOnly) {
if (endPageIndex > 1) {
if (opts.PageIndex > endPageIndex) opts.PageIndex = endPageIndex;
if (opts.PageIndex <= 0) opts.PageIndex = startPageIndex;
for (var i = 1; i <= endPageIndex; i++) { if (opts.PageIndex == i) {
$content.append($("<span >" + i + "</span>"));
} else {
$content.append(renderNumberButton(i, i, opts));
}
}
}
} else {
var ranNumber = Math.floor(Math.random() * 10) + "" + Math.floor(Math.random() * 10);
if (opts.IsShowPage != false) {
$content.append($("<span >当前" + opts.PageIndex + " / " + endPageIndex + "页</span>"));
}
$content.append($("<span >共" + opts.PageCount + "条数据</span>"));
if (opts.PageIndex > endPageIndex) opts.PageIndex = endPageIndex;
if (opts.PageIndex <= 0) opts.PageIndex = startPageIndex;
var nextPageIndex = opts.PageIndex + 1;
var prevPageIndex = opts.PageIndex - 1;
if (opts.PageIndex == startPageIndex) {
$content.append($("<span class='first'>首 页</span>"));
$content.append($("<span class='first'>上一页</span>"));
} else {
$content.append(renderTopButton(1, "首 页", opts));
$content.append(renderTopButton(prevPageIndex, "上一页", opts));
}
//这里判断是否显示页码
if (opts.ShowPageNumber) {
//页码部分隐藏 只显示中间区域
if (endPageIndex <= 5 && opts.PageIndex <= 5) {
for (var i = 1; i <= endPageIndex; i++) {
if (i == opts.PageIndex) {
$content.append($("<span class='current'>" + i + "</span>"));
} else {
$content.append(renderButton(i, i, opts));
}
}
} else if (endPageIndex > 5 && endPageIndex - opts.PageIndex <= 2) {
$content.append($("<span class='dotted'>...</span>"));
for (var i = endPageIndex - 4; i <= endPageIndex; i++) {
if (i == opts.PageIndex) {
$content.append($("<span class='current'>" + i + "</span>"));
} else {
$content.append(renderButton(i, i, opts));
}
}
} else if (endPageIndex > 5 && opts.PageIndex > 3) {
$content.append($("<span class='dotted'>...</span>"));
for (var i = opts.PageIndex - 2; i <= opts.PageIndex + 2; i++) {
if (i == opts.PageIndex) {
$content.append($("<span class='current'>" + i + "</span>"));
} else {
$content.append(renderButton(i, i, opts));
}
}
$content.append($("<span class='dotted'>...</span>"));
} else if (endPageIndex > 5 && opts.PageIndex <= 3) {
for (var i = 1; i <= 5; i++) {
if (i == opts.PageIndex) {
$content.append($("<span class='current'>" + i + "</span>"));
} else {
$content.append(renderButton(i, i, opts));
}
}
$content.append($("<span class='dotted'>...</span>"));
}
}
if (opts.PageIndex == endPageIndex) {
$content.append($("<span class='last'>下一页</span>"));
$content.append($("<span class='last'>末 页</span>"));
} else {
$content.append(renderButton(nextPageIndex, "下一页", opts));
$content.append(renderButton(endPageIndex, "末 页", opts));
} if (opts.IsShowTurnTo) {
$content.append($("<span>跳转至第<input type='text' id='indexVal" + ranNumber + "' />页</span>"));
$content.append(renderTurnToButton(ranNumber, opts));
}
$content.append(renderReflash(opts.PageIndex,opts));
}
$content.append($("<div style='clear:both;'></div>"));
return $content;
}
function renderTurnToButton(i, opts) {
var $turnto = $("<span><a title='跳转' class='btn40x20' >跳转 </a></span>");
$turnto.click(function () {
turnTo(i, opts);
});
return $turnto;
}
function renderReflash(goPageIndex,opts)
{
var $turnto = $("<span style='display:none;'><a title='刷新' class='page_current'>刷新</a></span>");
$turnto.click(function () {
PageClick(goPageIndex, opts);
});
return $turnto;
}
function renderTopButton(goPageIndex, text, opts) {
var $goto = $("<span class='prev' title='第" + goPageIndex + "页' >" + text + "</span>'");
$goto.click(function () {
PageClick(goPageIndex, opts);
});
return $goto;
}
function renderButton(goPageIndex, text, opts) {
var $goto = $("<span class='p_next' title='第" + goPageIndex + "页' >" + text + "</span>'");
$goto.click(function () {
PageClick(goPageIndex, opts);
});
return $goto;
} function renderNumberButton(goPageIndex, text, opts) {
var $goto = $("<span title='第" + goPageIndex + "页' style='cursor: pointer;' class='current' >" + text + "</span>'");
$goto.click(function () {
PageClick(goPageIndex, opts);
});
return $goto;
}
//初始化参数
var pagerDefaults = {
PageCount: 1, //总行数
PageIndex: 1, //当前页数
PageSize: 20, //每页显示行数
ShowPageNumber: false, //显示页码
IsShowPage: true, //显示当前 1/1页
IsShowTurnTo: true, //显示跳转
IsShowNumberOnly: false, //只显示页码
IsShowLoadMovie: false,
PageId: "#pageing", //要显示页码的地方
Url: "", //要post数据的地方
Options: {}, //要post到服务端的参数
CallBack: function () { return 1; } //回调函数，可在此处执行数据绑定，一定要返回行总数
}
})(jQuery);
支持查询数据后，更改查询条件不影响现在的分页条件。支持界面刷新，支持自定义查询参数。支持查询出错报错功能，支持不与服务器交互呈现分页。
调用方法：
InitPager({
PageId: "#paging",
Url: "/ashx/teacherHandler.ashx",
Options: { swType: "GetDataList", agentId: "-1", orgId: "-1", schoolId: schGuid, departId: depGuid, name: name, phone: phone, s: s, card: card, cardNo: cardNo },
CallBack: function (result) {
$('#tbody').html('');
$("#demo").tmpl(result.Rows).appendTo("#tbody");
//要返回总数，这里的result包括当前页数，每页显示行数
return result.Total;
}
});
可以自定义查询页数和每页显示条数。
下面是用到的样式文件：
/*--
.pageinfo{ float:left; height:auto; width:auto;}
.pages { float: right; height: 30px; overflow: hidden; font-family: Arial,SimSun; }
.pages li { display:inline-block; margin-right:10px;height:30px;}
.pages .dotted { font-weight: bold; }
.pages .beginEnd { height: 28px;border:1px solid #ccc;color:#0063DC;
line-height: 28px;}
.pages A { color:#0063DC; }
.pages span { cursor: pointer;height: 28px;color:#0063DC;
min-width: 40px;
overflow: hidden;
padding:3px 5px;
text-align: center;
vertical-align: middle;
white-space: nowrap; background:#fff; }
.prev{ background: url(../../Img/login/prompt.png) no-repeat 0 -180px;
height: 23px; line-height: 23px; padding-top: 1px; }
.pages span:hover { border:1px solid #ff6600;;line-height: 28px; background:#FFEEE5; color: #ff6600;; }
.pages A { text-decoration: none; }
.pages A:visited { color: #ff6600;; }
.pages A:hover { background: #1f3a87; }
.pages .current { background: #1f3a87; }
.pages .current { font-weight: bold; }
.pages SPAN { color: #ccc; } --*/ .pager{ margin-top:10px; margin-bottom:10px;height:20px;}
.pages { float: right; height: 30px; overflow: hidden; font-size:12px; overflow:hidden; }
.pages span {
overflow: hidden;
text-align: center; margin:0 5px; line-height:15px;
}
.pages .current{ background-color: #FFEEE5;border: 1px solid #357B1C;color: #357B1C;; font-weight:; }
.pages input{ width:22px; border:1px solid #ccc; vertical-align: middle; text-align:left; color:#000; font-family:Arial;
margin:0 5px; height:14px; padding:3px; font-size:12px; font-family:Arial;}
.pages .first,.pages .prev,.pages .p_next,.pages .last{ background: url(/skin/skin1/Img/prompt.gif) no-repeat; cursor: pointer;color:#357B1C;border:1px solid #ccc; height:15px;
vertical-align: middle; white-space: nowrap;overflow:hidden; display:inline-block; }
.pages .first{ background-position:0 -497px; color:#000; padding:3px 5px 3px 15px; *padding:6px 5px 1px 15px;*background-position:0 -496px; /*IE6*/ }
.pages .prev{ background-position:0 -417px; color:#357B1C;; padding:3px 5px 3px 15px;*padding:6px 5px 1px 15px; *background-position:0 -416px;/*IE6*/}
.pages .prev:hover{border:1px solid #357B1C;; color: #357B1C;; padding:3px 5px 3px 15px;*padding:6px 5px 1px 15px;}
.pages .p_next{background-position:right -456px; color:#357B1C;; padding:3px 15px 3px 5px;*padding:6px 15px 1px 5px; *background-position:right -455px;/*IE6*/}
.pages .p_next:hover{border:1px solid #357B1C;; color: #357B1C;; padding:3px 15px 3px 5px;*padding:6px 15px 1px 5px;}
.pages .last{background-position:right -536px; color:#000; padding:3px 15px 3px 5px; *padding:6px 15px 1px 5px;*background-position:right -535px;/*IE6*/}
.btn40x20{width:40px; height:20px;
color:#357B1C;
cursor:pointer;
vertical-align:middle;
text-align:center;
overflow:hidden;
padding:;
border:1px solid #cccccc;
color:#000; font:12px/20px Tahoma, "宋体", sans-serif; display:inline-block;}
JQuery 分页显示jquery-pager-1.0.js的更多相关文章
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <lin ...
- Jquery 分页插件 Jquery Pagination
Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...
- 【jQuery 分页】jQuery分页功能的实现
自写的jQuery实现分页功能的分页组件: 功能效果如下: 分页组件就是上图中的三部分, 分别放在表格上部 和下部 . 其中, 1>>>页面的代码如下: product.jsp 其 ...
- 分享一个Jquery 分页插件 Jquery Pagination
分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...
- js前端分页之jQuery
锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...
- jquery分页组件(每页显示多少条)
/** * 功能说明:jPager 分页插件 * 参数说明:pages:[] 分页的控件个数 @id:显示分页的div ID,@showSelectPage: 是否显示当前分页的条目过滤下拉框 * @ ...
- 锋利的js前端分页之jQuery
大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比较简单. /** * pageSi ...
- 分页插件jquery.simplePagination.js使用
利用ecshop后台,利用插件更改分页显示样式遇到的问题,由于是利用Ajax获取数据进行页面数据更新?所以出现了以下情况: 初始化页面前 : 分页更新后: 点击后出现了分页插件内容消失, 原因:分页一 ...
- jquery ajax自定义分页组件(jquery.loehpagerv1.0)原创
简单的两个步骤截可调用 <script src="<%=basePath%>/resources/js/jquery-1.7.1.min.js"></ ...
随机推荐
- 使用Spring Initializr创建项目
Spring initializr 是Spring 官方提供的一个很好的工具,可以用来用来创建一个Spring boot 的项目.可以选择使用Maven管理或者使用Gradle管理,还可以选择使用的编 ...
- C#实现导出Excel
这段时间用到了导出Excel的功能,这个功能还是比较常用的,我常用的有两个方法,现在整理一下,方便以后查看. 一.实现DataTable数据导出到本地,需要自己传进去导出的路径. /// <su ...
- Django 框架介绍
Django 框架介绍 MVC框架和MTV框架 简单了解一下什么是MVC框架.MVC(Model View Controller),是模型(model)-视图(view)-控制器(controller ...
- 28.C++- 单例类模板(详解)
单例类 描述 指在整个系统生命期中,一个类最多只能有一个实例(instance)存在,使得该实例的唯一性(实例是指一个对象指针) , 比如:统计在线人数 在单例类里,又分为了懒汉式和饿汉式,它们的区 ...
- issubclass判断前面是不是后面的子类
issubclass(sub,sup) 判断前面是不是后面的子类
- windows使用Win32DiskImager安装树莓派系统
首先去 官网 下载一个树莓派镜像. 然后使用Win32DiskImager这个工具安装. 不过试了以下好像不管用. 然后网上有ubuntu安装树莓派操作系统的方法. 于是就想我要是装树莓派不会还得装一 ...
- 40叔：自学的伙伴推荐看的PHP视频和书藉
记录一下我的学习编程经历,在自学的路上,看了不少的断断续续的看了不少的视频,现在只会一点PHP增删改查. 同样迷的有没有? 要自己用原生的开发个CMS 或者BBS,ask 系统好像还差的远. 所以回头 ...
- JavaScript高级程序设计（第3版)
准备开始分享阅读笔记 自己收获的同时 让更多的人收益 这也是我力荐的学习javascript基础的书籍
- jdk 动态代理源码分析
闲来无事,撸撸源码 使用方法 直接看代码吧.. package com.test.demo.proxy; import java.lang.reflect.InvocationHandler; imp ...
- Redis常用命令--Sets
Set是不重复且无序的字符串元素的集合. 还可以对set集取交集,并集,差等等. 在Redis中大概有15个操作Set的命令. SADD key member [member ...]:添加一个或者多 ...