java jquery 分页插件怎样实现_使用JQuery实现的分页插件分享

一个简单的jQuery分页插件，兼容AMD规范和requireJS.

/**

* jQuery分页插件

* */

;(function (factory) {

if (typeof define === "function" && define.amd) {

// AMD模式

define([ "jquery" ], factory);

} else {

// 全局模式

factory(jQuery);

}

}(function ($) {

//定义MyPagePlugin的构造函数

MyPagePlugin = function(ele, option) {

// this.viewHtml="

• «
• ‹
• 第页,共页
• ›
• »

";

this.viewHtml= "

« ‹ 第页,共页 › »

"

this.$element = ele;

/**参数：page:当前页,pageCount:总共页数,onPaged回调函数,回调函数会传入页数*/

this.defaults = {

page:1,

pageCount:1,

onPaged:function(pageNo){}

};

this.options = $.extend({}, this.defaults, option);

}

//定义MyPagePlugin的方法

MyPagePlugin.prototype = {

initPlugin:function(){

this.$element.empty();

this.$element.append(this.viewHtml);

this.options.onPaged(this.options.page);//初始化

this.$element.find(".curPageNoSpan").text(this.options.page);

this.$element.find(".curPageNoSpan").data("options",this.options);

this.$element.find(".allPageCountSpan").text(this.options.pageCount);

this.$element.find(".firstPageli").on("click",function(e){

var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();

curNo=parseInt(curNo);

if(curNo==1){

return false;

}else{

$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(1);

$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(1);

}

return false;

});

this.$element.find(".prevPageli").on("click",function(e){

var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();

curNo=parseInt(curNo);

if(curNo==1){

return false;

}else{

$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(curNo-1);

$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(curNo-1);

}

return false;

});

this.$element.find(".nextPageli").on("click",function(e){

var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();

curNo=parseInt(curNo);

var pageCount=$(e.currentTarget).parent("div.pageplugin").find(".allPageCountSpan").text();

pageCount=parseInt(pageCount);

if(curNo==pageCount){

return false;

}else{

$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(curNo+1);

$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(curNo+1);

}

return false;

});

this.$element.find(".lastPageli").on("click",function(e){

var curNo=$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text();

curNo=parseInt(curNo);

var pageCount=$(e.currentTarget).parent("div.pageplugin").find(".allPageCountSpan").text();

pageCount=parseInt(pageCount);

if(curNo==pageCount){

return false;

}else{

$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").data("options").onPaged(pageCount);

$(e.currentTarget).parent("div.pageplugin").find(".curPageNoSpan").text(pageCount);

}

return false;

});

}

}

$.fn.pagePlugin = function (option) {

var pagePlugin=new MyPagePlugin(this,option);

pagePlugin.initPlugin();

};

}));

CSS

.pageplugin {

display: inline-block;

border: 1px solid #CDCDCD;

border-radius: 3px; }

.pageplugin a {

cursor: pointer;

display: block;

float: left;

width: 20px;

height: 20px;

outline: none;

border-right: 1px solid #CDCDCD;

border-left: 1px solid #CDCDCD;

color: #767676;

vertical-align: middle;

text-align: center;

text-decoration: none;

font-weight: bold;

font-size: 16px;

font-family: Times, 'Times New Roman', Georgia, Palatino;

background-color: #f7f7f7;

/* ATTN: need a better font stack

background-color: #f7f7f7;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey));

background-image: -webkit-linear-gradient(#f3f3f3, lightgrey);

background-image: linear-gradient(#f3f3f3, lightgrey); */}

.pageplugin a:hover, .pageplugin a:focus, .pageplugin a:active {

color:#0099CC;

background-color: #cecece;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e4e4e4), color-stop(100%, #cecece));

background-image: -webkit-linear-gradient(#e4e4e4, #cecece);

background-image: linear-gradient(#e4e4e4, #cecece); }

.pageplugin a.disabled, .pageplugin a.disabled:hover, .pageplugin a.disabled:focus, .pageplugin a.disabled:active {

background-color: #f3f3f3;

background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, lightgrey));

background-image: -webkit-linear-gradient(#f3f3f3, lightgrey);

background-image: linear-gradient(#f3f3f3, lightgrey);

color: #A8A8A8;

cursor: default; }

.pageplugin a:first-child {

border: none;

border-radius: 2px 0 0 2px; }

.pageplugin a:last-child {

border: none;

border-radius: 0 2px 2px 0; }

.pageplugin .present {

float: left;

margin: 0;

padding: 0;

width: 120px;

height: 20px;

outline: none;

border: none;

vertical-align: middle;

text-align: center; }

jquery分页插件cypager

cypager是网友分享到JquerySchool网站上的一款作品，非常实用，经过测试，插件兼容 IE8+,Chrome,Firefox 浏览器,核心文件仅 5KB。。。

调用方式

由于是 jquery插件，所以在引人 cypager.min.js 之前，要引人 jquery.min.js 本人使用的是 1.7.2 版本的，低版本的没试过。

引入css :

引人js  :

$(function(){

$("#pagerArea").cypager({pg_size:10,pg_nav_count:8,pg_total_count:194,pg_call_fun:function(count){

alert("跳转至页面:"+count+"");

}});

});

参数说明

pgerId //插件的ID 默认 : cy_pager

pg_size   //每页显示记录数 默认：10条

pg_cur_count //当前页数(如果需要默认显示指定页面，则设置)

pg_total_count //总记录数

pg_nav_count     //显示多少个导航数  默认：7个

pg_prev_name     //上一页按钮名称(默认：PREV)

pg_next_name     //下一页按钮名称 (默认：NEXT)

pg_call_fun(page_count)      //回调函数，点击按钮执行

高效JQUERY分页插件源代码JQUERY.PAGER.JS

本文将给大家分享一个非常不错的分页插件、jQuery.pager.js、该插件的优点是可以内容索引、使用了jQuery、也同时调用了jquery.pager.js文件、分页都是基于Ajax的、当然、如果你不打算使用Ajax来实现分页的话、那么你最好不要使用本插件、若使用的话反而很麻烦、本插件主要是为使用Ajax技术交互的网站所准备、可以很方便的嵌入到网站系统中、实现Ajax分页功能、如果大家觉得这个效果不是很好看的话、可以自己重写分页按钮的样式哈

HTML代码很简单、只要准备一个用于分页代码的DIV就可以了

通过jQuery的方式调用即可

$(".tcdPageCode").createPage({

pageCount:6,

current:1,

backFn:function(p){

console.log(p);

}

});