jquery自定义分页插件
//每次只显示5个页码
(function ($) {
//设定页码方法,初始化
$.fn.setPager = function (options) {
var opts = $.extend({}, pagerDefaults, options);
return this.each(function () {
$(this).empty().append(setPagerHtml(parseInt(options.RecordCount), parseInt(options.PageIndex), parseInt(options.PageSize), options.buttonClick));
});
};
//设定页数及html
function setPagerHtml(RecordCount, PageIndex, PageSize, pagerClick) {
var $content = $("<ul class=\"pages\"></ul>");
var startPageIndex = 1;
//若页码超出
if (RecordCount <= 0) RecordCount = PageSize;
//末页
var endPageIndex = parseInt(RecordCount % parseInt(PageSize)) > 0 ? parseInt(RecordCount / parseInt(PageSize)) + 1 : RecordCount / parseInt(PageSize)
if (PageIndex > endPageIndex) PageIndex = endPageIndex;
if (PageIndex <= 0) PageIndex = startPageIndex;
var nextPageIndex = PageIndex + 1;
var prevPageIndex = PageIndex - 1;
if (PageIndex == startPageIndex) {
$content.append($("<li><span class=\"beginEnd\">首页</span></li>"));
$content.append($("<li><span class=\"beginEnd\">上一页</span></li>"));
} else {
$content.append(renderButton(RecordCount, 1, pagerClick, "<span class=\"beginEnd\">首页</span>"));
$content.append(renderButton(RecordCount, prevPageIndex, pagerClick, "<span class=\"beginEnd\">上一页</span>"));
}
//这里判断是否显示页码
if (pagerDefaults.ShowPageNumber) {
// var html = "";
//页码部分隐藏 只显示中间区域
if (endPageIndex <= 5 && PageIndex <= 5) {
for (var i = 1; i <= endPageIndex; i++) {
if (i == PageIndex) {
$content.append($("<li><span class=\"current\">" + i + "</span></li>"));
} else {
$content.append(renderButton(RecordCount, i, pagerClick, i));
}
}
} else if (endPageIndex > 5 && endPageIndex - PageIndex <= 2) {
$content.append($("<li class=\"dotted\">...</li>"));
for (var i = endPageIndex - 4; i <= endPageIndex; i++) {
if (i == PageIndex) {
$content.append($("<li><span class=\"current\">" + i + "</span></li>"));
} else {
$content.append(renderButton(RecordCount, i, pagerClick, i));
}
}
} else if (endPageIndex > 5 && PageIndex > 3) {
$content.append($("<li class=\"dotted\">...</li>"));
for (var i = PageIndex - 2; i <= PageIndex + 2; i++) {
if (i == PageIndex) {
$content.append($("<li><span class=\"current\">" + i + "</span></li>"));
} else {
$content.append(renderButton(RecordCount, i, pagerClick, i));
}
}
$content.append($("<li class=\"dotted\">...</li>"));
} else if (endPageIndex > 5 && PageIndex <= 3) {
for (var i = 1; i <= 5; i++) {
if (i == PageIndex) {
$content.append($("<li><span class=\"current\">" + i + "</span></li>"));
} else {
$content.append(renderButton(RecordCount, i, pagerClick, i));
}
}
$content.append($("<li class=\"dotted\">...</li>"));
}
}
if (PageIndex == endPageIndex) {
$content.append($("<li><span class=\"beginEnd\">下一页</span></li>"));
$content.append($("<li><span class=\"beginEnd\">末页</span></li>"));
} else {
$content.append(renderButton(RecordCount, nextPageIndex, pagerClick, "<span class=\"beginEnd\">下一页</span>"));
$content.append(renderButton(RecordCount, endPageIndex, pagerClick, "<span class=\"beginEnd\">末页</span>"));
}
return $content;
}
function renderButton(recordCount, goPageIndex, EventHander, text) {
var $goto = $("<li><a>" + text + "</a></li>\"");
$goto.click(function () {
EventHander(recordCount, goPageIndex);
});
return $goto;
}
var pagerDefaults = {
DefaultPageCount: 1,
DefaultPageIndex: 1,
PageSize: 10,
ShowPageNumber: true //是否显示页码
};
})(jQuery);
//pagerDefaults.PageSize
jquery自定义分页插件的更多相关文章
- Jquery前端分页插件pagination使用
插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...
- 转:精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- jQuery Pagination分页插件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery的分页插件
Jquery的分页插件, 用起来还不错. 来自: http://flaviusmatis.github.io/simplePagination.js/ 下载地址: https://github.c ...
- 12款优秀 jQuery Ajax 分页插件和教程
12款优秀 jQuery Ajax 分页插件和教程 在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...
- jQuery Pagination分页插件--刷新
源码地址:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx ...
- Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
- MyBatis-编写自定义分页插件
一.基础知识 本文测试和源码分析参考版本: Mybatis-version:3.5.5 本文相关测试源代码:https://github.com/wuya11/mybatis_demo 1.1 参考方 ...
- 炫酷JQUERY自定义对话框插件JDIALOG_JDIALOG弹出对话框和确认对话框插件
多种类型自定义对话框插件jDialog是一款基于jquery实现的轻量级多种类型的自定义对话框插件 在项目开发中.一般会美化 alert(); 的样式.那么今天我就和大家分享一款非常炫的插件 先来看一 ...
随机推荐
- 具有 CSA CCM 证明的 SOC 2 可简化 Windows Azure 客户的安全性评估过程
编辑人员注释:本文章由 Windows Azure 产品市场营销总监 Sarah Fender 撰写. 今天,我们宣布 Microsoft 的公共审计师 Deloitte 已经发布了有关 Window ...
- openStack core service Components Ins shell scripts and simple provision
will to be announced,functional testing,tuning,debuging.....,Enthusiastic audience Please to wait pa ...
- 追踪神秘的成都Uber:月入2万元是现实还是传说
4月6日,一个视频在网上疯转——在上海,明星佟大为驾驶着售价近100万元的特斯拉电动汽车,作为一名Uber的司机满市转悠着拉客. Uber——优步,如果你不知道这个词,那就OUT了.就是这样的一款软件 ...
- sharepoint 2013 文档库 资源管理器打开报错 在文件资源管理器中打开此位置时遇到问题,将此网站添加到受信任站点列表,然后重试。
我们在使用sharepoint 2013的文档库或者资源库的时候,经常会需要用到使用“资源管理器”来管理文档,但是有时候,点击“使用资源管理器打开”,会提示如下错误: 在文件资源管理器中打开此位置时遇 ...
- ios蓝牙开发(一)蓝牙相关基础知识
蓝牙常见名称和缩写 MFI ======= make for ipad ,iphone, itouch 专们为苹果设备制作的设备 BLE ==== buletouch low energy,蓝牙4.0 ...
- Android Animation学习(一) Property Animation介绍
Android Animation Android framework提供了两种动画系统: property animation (introduced in Android 3.0)和view an ...
- MOSS程序中如何发Mail?
我们使用.NET类库中的API发Mail的时候,我们要配置他的SMTP Server等,但是在Sharepoint里,已经提供了相关的封装的方法: SPUtility.SendEmail(SPWeb, ...
- SQL Server 动态行转列(轉載)
一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 实现代码(SQL Codes) 方法一:使用拼接SQL,静态列字段; 方法二:使用拼接SQL, ...
- BZOJ 2662: [BeiJing wc2012]冻结(最短路)
这道题和 BZOJ 2763飞行路线 几乎一模一样..然后飞行路线我是1A,这道题WA了4次,我开始怀疑我的智商了.. ---------------------------------------- ...
- codeforcese 498C. Array and Operations 网络流
题目链接 给n个数, m个数对, 每个数对是两个下标加起来为奇数的两个数.每次操作可以使一个数对中的两个数同时除某个数, 除的这个数是这两个数的任意约数, 问这种操作最多可以做几次.n<100, ...