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"></ ...
随机推荐
- 关于阿里巴巴iconfont的使用方法
iconfont网址:http://www.iconfont.cn/ 说起iconfont,做前端开发的应该知道它的好处,图标库之丰富,只有你想不到的,没有你找不到的,而且轻量高清.用户在iconfo ...
- flask 视图函数的使用
flask框架 视图函数当中 各种实用情况简单配置 1 建立连接 2 路由参数 3 返回网络状态码 4 自定义错误页面 5 重定向 6 正则url限制 和 url 优化 7 设置和获取cookie # ...
- show engine innodb status输出说明
参考链接 (https://dev.mysql.com/doc/refman/5.7/en/innodb-standard-monitor.html) 其中有这样一句: For a descripti ...
- python Http协议
Http协议 一 HTTP概述 HTTP(hypertext transport protocol),即超文本传输协议.这个协议详细规定了浏览器和万维网服务器之间互相通信的规则. HTTP就是一个通信 ...
- python基础——继承与派生、组合
python基础--继承与派生 1 什么是继承: 继承是一种创建新的类的方式,在python中,新建的类可以继承自一个或者多个父类,原始类成为基类或超累,新建的类成为派生类或子类 1.1 继承分为:单 ...
- 推荐系统——online（上）
框架介绍 上一篇从总体上介绍了推荐系统,推荐系统online和offline是两个组成部分,其中offline负责数据的收集,存储,统计,模型的训练等工作:online部分负责处理用户的请求,模型数据 ...
- 音频压缩编码 opus 附完整C++代码示例
绝大数人都知道mp3格式编码,以及aac,amr等压缩格式编码. 而在语音通信界有一个强悍的音频格式编码opus. 经过实测,压缩比最高可以达到1:10. 100KB 压缩后 10KB 虽然是有损压缩 ...
- angularjs bind与model配合双向绑定 表达式方法输出
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- 同步IO,异步IO,阻塞IO,非阻塞IO
同步(synchronous):一个进程在执行某个任务时,另外一个进程必须等待其执行完毕,才能继续执行 #所谓同步,就是在发出一个功能调用时,在没有得到结果之前,该调用就不会返回.按照这个定义, 其实 ...
- IIS&ASP.NET 站点IP跳转到域名
前言:先到微软的 https://www.iis.net/downloads/microsoft/url-rewrite 下载URL Rewrite 目标:输入ip跳转到域名所在的网站 比如58的1 ...