自己写的一个jQuery分页插件
;(function($){
$.fn.extend({
pageList: function (json) {
function PageList() {
this.initHtml = ""; //初次加载后的Html
this.num = 0; //页码个数
this.totalPageCount = 0;//总页数
this.size = 0;//每页数据条数
this.hiddenPosition = 3;//省略号的位置
this.fwNotNum = 2; //插件前面的非页码个数
this.fwNotNumHtml = "";//插件前面的非页码html
this.backNotNumHtml = "";//插件后面的非页码html
}
PageList.prototype.init = function (objPageList, json) {
var pageListFunction = this;
objPageList.addClass("pageList");
if (json) {
if (!json.total || isNaN(json.total)) {
json.total = 1;
// alert("分页插件total参数异常,插件加载失败");
//return;
}
if (!json.size || isNaN(json.size)) {
json.size = 10;
}
if (!json.num || isNaN(json.num) || json.num < 10) {
json.num = 10;
}
if(!json.ajax){
json.ajax=function(){};
}
}
var fwNotNumHtml = "<a class='pageList_FirstPage'><label>首页</label></a><a class='pageList_PrevPage'>上页</a>";
var backNotNumHtml = "<a class='pageList_NextPage'>下页</a><a class='pageList_LastPage'>末页</a><input class='jumpNum' type='text' value='' /><a class='jumpText' href='javascript:void(0)'>跳转</a>";
var html = "";
html += fwNotNumHtml;
var totalPageCount = Math.ceil(json.total / json.size); if (totalPageCount <= json.num) {
for (var i = 1; i <= totalPageCount; i++) {
if (i == 1) {
html += "<a class='pageList_Num pageList_Current'>" + i + "</a>";
continue;
}
html += "<a class='pageList_Num'>" + i + "</a>";
}
}
else {
var hidden = json.num - pageListFunction.hiddenPosition;
for (var i = 1; i <= totalPageCount; i++) {
if (i == 1) {
html += "<a class='pageList_Num pageList_Current'>" + i + "</a>";
continue;
}
if (i == hidden) {
html += "<a class='pageList_Hidden'>...</a>";
break;
}
html += "<a class='pageList_Num'>" + i + "</a>";
}
for (var j = pageListFunction.hiddenPosition - 1; j >= 0; j--) {
html += "<a class='pageList_Num'>" + (totalPageCount - j) + "</a>";
}
}
html += backNotNumHtml;
objPageList.html(html);
pageListFunction.initHtml = html;
pageListFunction.num = json.num;
pageListFunction.size = json.size;
pageListFunction.totalPageCount = totalPageCount;
pageListFunction.fwNotNumHtml = fwNotNumHtml;
pageListFunction.backNotNumHtml = backNotNumHtml;
pageListFunction.ajax=json.ajax;
}
PageList.prototype.centerPage = function () { return Math.ceil(this.totalPageCount / 2); }
PageList.prototype.limitData = function () { return this.totalPageCount - this.hiddenPosition - 1; }
PageList.prototype.clickA = function (objA, objPageList) {
var pageListFunction = this;
var clickA = 0;
if (objA.hasClass("pageList_Current") || objA.hasClass("pageList_Hidden")) {
return;
}
else if (objA.hasClass("pageList_Num")) {
clickA = parseInt(objA.html());
}
else if (objA.is(".pageList_FirstPage")) {
if (pageListFunction.getCurrentData(objPageList) == 1)
return;
clickA = 1;
}
else if (objA.is(".pageList_PrevPage")) {
clickA = pageListFunction.getCurrentData(objPageList) - 1;
if (clickA <= 0)
return;
}
else if (objA.is(".pageList_NextPage")) {
clickA = pageListFunction.getCurrentData(objPageList) + 1;
if (clickA > pageListFunction.totalPageCount)
return;
}
else if (objA.is(".pageList_LastPage")) {
if (pageListFunction.getCurrentData(objPageList) == pageListFunction.totalPageCount)
return;
clickA = pageListFunction.totalPageCount;
}
else if (objA.is(".jumpText")||objA.is("input.jumpNum")) {
var clickAtext = $(".jumpNum", objPageList).val();
if (clickAtext == "") return;
clickA = parseInt(clickAtext);
var currentA = pageListFunction.getCurrentData(objPageList);
if (isNaN(clickA)) { return; }
else if (clickA <=0) { return; }
else if (clickA > pageListFunction.totalPageCount) { return; }
else if (clickA == currentA) { return; }
}
pageListFunction.ajax();
pageListFunction.clickNum(clickA, objPageList);
} PageList.prototype.getCurrentData = function (objPageList) {
return parseInt($("a.pageList_Current",objPageList).html());
}
PageList.prototype.getHiddenFwOrBackData=function(objPageList,type){//返回省略号前面或后面的值
if(type=="fw")
return parseInt($("a.pageList_Hidden",objPageList).prev().html());
else if(type=="back")
return parseInt($("a.pageList_Hidden", objPageList).next().html());
}
PageList.prototype.hiddenFwOrBackHtml = function (type) {//返回省略号前后的htm页码的html
var html = "";
if (type === "fw") {//省略号在前
for (var i = 1; i <= this.hiddenPosition; i++) {
html += "<a class='pageList_Num'>" + i + "</a>";
}
}
else if (type === "back") {//省略号在后
for (var j = this.hiddenPosition - 1; j >= 0; j--) {
html += "<a class='pageList_Num'>" + (this.totalPageCount - j) + "</a>";
}
}
return html;
}
PageList.prototype.addPageList_Current = function (clickNum, objPageList) {
$("a.pageList_Num", objPageList).removeClass("pageList_Current").each(function () {
if (parseInt($(this).html()) == clickNum) {
$(this).addClass("pageList_Current");
}
});
}
PageList.prototype.getHiddenHtml = function () {
return "<a class='pageList_Hidden'>...</a>";
};
PageList.prototype.newHtml = function (type, objPageList, clickNum) {//返回新的Html,只返回不操作
var pageListFunction = this;
var html = "";
if (type == 1)
html += pageListFunction.initHtml;
else if (type == 2) {
html += pageListFunction.fwNotNumHtml; //首页,第一页
html += pageListFunction.hiddenFwOrBackHtml("fw"); //省略号前的数
html += pageListFunction.getHiddenHtml(); //省略号
var start = pageListFunction.totalPageCount - (pageListFunction.num - pageListFunction.hiddenPosition - 1) + 1;
for (var i = start; i <= pageListFunction.totalPageCount; i++) {
html += "<a class='pageList_Num'>" + i + "</a>";
}
html += pageListFunction.backNotNumHtml;
}
else if (type == 3) {
clickNum += 1;
html += pageListFunction.fwNotNumHtml;
var start = clickNum - (pageListFunction.num - pageListFunction.hiddenPosition - 1) + 1;
for (var i = start; i <= clickNum; i++) {
html += "<a class='pageList_Num'>" + i + "</a>";
}
html += pageListFunction.getHiddenHtml();
html += pageListFunction.hiddenFwOrBackHtml("back");
html += pageListFunction.backNotNumHtml;
}
else if (type == 4) {
html += pageListFunction.fwNotNumHtml;
html += pageListFunction.hiddenFwOrBackHtml("fw");
html += pageListFunction.getHiddenHtml();
clickNum -= 1;
var end = pageListFunction.num - pageListFunction.hiddenPosition - 1 + clickNum - 1;
for (var i = clickNum; i <= end; i++) {
html += "<a class='pageList_Num'>" + i + "</a>";
}
html += pageListFunction.backNotNumHtml;
}
return html;
}
PageList.prototype.clickNum = function (clickNum, objPageList) {
var pageListFunction = this;
var html = "";
if (pageListFunction.totalPageCount <= pageListFunction.num) {
pageListFunction.addPageList_Current(clickNum, objPageList); return;
}
else if (clickNum <= 5) {
html = pageListFunction.newHtml(1, objPageList);
}
else if (clickNum >= pageListFunction.limitData()) {
html = pageListFunction.newHtml(2, objPageList);
}
else {
if (clickNum < pageListFunction.centerPage())
html = pageListFunction.newHtml(3, objPageList, clickNum);
else if (clickNum >= pageListFunction.centerPage())
html = pageListFunction.newHtml(4, objPageList, clickNum);
}
objPageList.html(html);
pageListFunction.addPageList_Current(clickNum, objPageList);
}
var objPageList = $(this);
var p = new PageList();
p.init(objPageList, json, p);
objPageList.on("click", "a:not('.pageList_Hidden')", function () {
p.clickA($(this), objPageList);
});
objPageList.on("keyup","input.jumpNum",function(event){
if(event.which===13){
p.clickA($(this), objPageList);
}
});
}
});
})(jQuery);
.pageList{ clear:both; overflow:hidden;}
.pageList .pageList_Nums{ float:left;}
.pageList a{border:1px solid #ccc; margin-left:10px; float:left; display:block; overflow:hidden; padding:3px; font-family:微软雅黑; font-size:12px; min-width:15px; text-align:center; cursor:pointer; height:20px; line-height:20px;}
.pageList a:hover,.pageList_Current{ background-color:#278DE1;}
.pageList a.pageList_Hidden{ border:none; cursor:default;}
.pageList a.pageList_Hidden:hover{ background-color:transparent;}
.pageList input.jumpNum{ width:30px; border:1px solid #8c8c8c; float:left; width:30px; height:20px; margin-left:5px; line-height:20px; padding:3px; text-align:center;}
.pageList a.jumpText{ border:none;background:none; outline:none; margin-left:;}
调用插件:
$(function(){
$("#pagelist").pageList({ total: 1021, num: 10, size: 8,ajax:function(){
$.ajax({
type: "POST",
//dataType: "html",
url: "",
cache:false,
//data: { pageStar: pageStar, pageEnd: pageEnd },
error: function () { },
success: function (data) {//alert("这里的ajax可以正常执行");
}
});
} });
})
HTML代码:
<div id="pagelist"></div>
界面效果:
自己写的一个jQuery分页插件的更多相关文章
- 自己diy一个jquery分页插件
js基础学习过程中,期间经历换工作的各种面试,很多面试官问过:有没有写过jquery插件?等类似问题. 就个人而言,关于jquery插件的文章确实看过不少,但是一直没有动手写一个,一是不想在目前学习j ...
- 分享一个Jquery 分页插件 Jquery Pagination
分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...
- 一个强大的jquery分页插件
点击这里查看效果 这个分页插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)页面中对分页总数,参数名,前缀后 ...
- 用jQuery写了一个模态框插件
用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...
- 自己在项目中写的一个Jquery插件和Jquery tab 功能
后台查询结果 PDFSearchResult实体类: [DataContract(Name = "PDFSearchResult")] public class PDFSearch ...
- 21个很棒的jQuery分页插件下载
分页是指将一个大内容划分为各种不同的页面,因此网站的分页是一个很重要的部分,必须让内容有组织性和易于访问.分页有各两种不同的方式,手动跟自动.最受欢迎简单和广泛的方法是jQuery插件.下面我们收集了 ...
- jquery分页插件的修改
前言 最近分页功能使用的比较多,所以从网上下载个jquery分页插件来使用, 之前用的都挺好的,直到昨天出现了逻辑问题,反复查看自己的代码,最后发现是点击页码后执行了多个点击事件.最后只有自己查看源码 ...
- jQuery 分页插件 jqPagination的使用
jqPagination 是一个简单易用的轻量级 jQuery分页插件,其使用了 HTML5 和 CSS3 技术来实现.此插件提供了几个参数设置选项,通过简单的配置即可生成分页控件.此外,它的外观样式 ...
- Jquery 分页插件 Jquery Pagination
Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...
随机推荐
- Python 字典的增删改查
dic = {"意大利": "李云龙","美国":"美国往事"} dic["日本"] = " ...
- node-webkit 入门
下载node-webkit 点击这里: https://github.com/rogerwang/node-webkit 找到Downloads这一小节,然后下载对应平台的node-webkit预编译 ...
- Hign-Speed Tracking with Kernelzied Correlation Filters
reference:Hign-Speed Tracking with Kernelzied Correlation Filters questions: The core componet of mo ...
- 最大似然估计和最大后验概率MAP
最大似然估计是一种奇妙的东西,我觉得发明这种估计的人特别才华.如果是我,觉得很难凭空想到这样做. 极大似然估计和贝叶斯估计分别代表了频率派和贝叶斯派的观点.频率派认为,参数是客观存在的,只是未知而矣. ...
- Linux kernel 不输出log信息
/********************************************************************************* * Linux kernel 不输 ...
- How to return NULL string
Q: std::string get_file_contents(const char *filename) { std::ifstream in(filename, std::ios::in | s ...
- WC游记
第一次来WC,感觉这种集训真吼啊 day0 火车上快速补习了莫队,和AC自动姬,AC自动姬以前就会写只不过太久没写忘了我会了= = 莫队只是学习了做法,还没有做过题…… 本来想再复习一下后缀数组,然后 ...
- 【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.4 LHS简介&Pattern
LHS简介 在规则文件组成章节,我们已经了解了LHS的基本使用说明.LHS是规则条件部分的统称,由0个或多个条件元素组成.前面我们已经提到,如果没有条件元素那么默认就是true. 没有条件元素,官方示 ...
- WebSocket(二)-WebSocket、Socket、TCP、HTTP区别
原文地址:Socket 与 WebSocket 1. 概述 WebSocket 是为了满足基于 Web 的日益增长的实时通信需求而产生的.在传统的 Web 中,要实现实时通信,通用的方式是采用 HTT ...
- 关于jdbc的面试题
什么是JDBC,在什么时候会用到它? JDBC的全称是Java DataBase Connection,也就是Java数据库连接,我们可以用它来操作关系型数据库.JDBC接口及相关类在java.sql ...