使用JQuery實(shí)現(xiàn)的分頁插件分享
更新時(shí)間：2015年11月05日 11:36:01 投稿：hebedich
本文給大家總結(jié)了幾種使用jQuery實(shí)現(xiàn)的分頁插件，效果非常不錯(cuò)，有需要的小伙伴可以參考下。
一個(gè)簡(jiǎn)單的jQuery分頁插件，兼容AMD規(guī)范和requireJS.
/**
* jQuery分頁插件
* */
;(function (factory) {
if (typeof define === "function" && define.amd) {
// AMD模式
define([ "jquery" ], factory);
} else {
// 全局模式
factory(jQuery);
}
}(function ($) {
//定義MyPagePlugin的構(gòu)造函數(shù)
MyPagePlugin = function(ele, option) {
// this.viewHtml="<nav><ul class='pagination'><li><a id='firstPageli'>«</a></li><li><a id='prevPageli'>‹</a></li><li class='active'><a>第<span id='curPageNoSpan'></span>頁,共<span id='allPageCountSpan'></span>頁</a></li><li><a id='nextPageli'>›</a></li><li><a id='lastPageli'>»</a></li></ul></nav>";
this.viewHtml= "<div class='pageplugin'><a class='first firstPageli'>«</a><a class='previous prevPageli'>‹</a><a class='present'>第<span class='curPageNoSpan'></span>頁,共<span class='allPageCountSpan'></span>頁</a><a class='next nextPageli'>›</a><a class='last lastPageli'>»</a></div>"
this.$element = ele;
/**參數(shù)：page:當(dāng)前頁,pageCount:總共頁數(shù),onPaged回調(diào)函數(shù),回調(diào)函數(shù)會(huì)傳入頁數(shù)*/
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是網(wǎng)友分享到JquerySchool網(wǎng)站上的一款作品，非常實(shí)用，經(jīng)過測(cè)試，插件兼容 IE8+,Chrome,Firefox 瀏覽器,核心文件僅 5KB。。。
調(diào)用方式
由于是 jquery插件，所以在引人 cypager.min.js 之前，要引人 jquery.min.js 本人使用的是 1.7.2 版本的，低版本的沒試過。
引入css : <link rel="stylesheet" href="css/cypager.min.css" />
引人js : <script type="text/javascript" src="js/cypager.min.js"/>
$(function(){
$("#pagerArea").cypager({pg_size:10,pg_nav_count:8,pg_total_count:194,pg_call_fun:function(count){
alert("跳轉(zhuǎn)至頁面:"+count+"");
}});
});
參數(shù)說明
pgerId //插件的ID 默認(rèn) : cy_pager
pg_size //每頁顯示記錄數(shù) 默認(rèn)：10條
pg_cur_count //當(dāng)前頁數(shù)（如果需要默認(rèn)顯示指定頁面，則設(shè)置）
pg_total_count //總記錄數(shù)
pg_nav_count //顯示多少個(gè)導(dǎo)航數(shù) 默認(rèn)：7個(gè)
pg_prev_name //上一頁按鈕名稱（默認(rèn)：PREV）
pg_next_name //下一頁按鈕名稱 (默認(rèn)：NEXT)
pg_call_fun(page_count) //回調(diào)函數(shù)，點(diǎn)擊按鈕執(zhí)行
高效JQUERY分頁插件源代碼JQUERY.PAGER.JS
本文將給大家分享一個(gè)非常不錯(cuò)的分頁插件、jQuery.pager.js、該插件的優(yōu)點(diǎn)是可以內(nèi)容索引、使用了jQuery、也同時(shí)調(diào)用了jquery.pager.js文件、分頁都是基于Ajax的、當(dāng)然、如果你不打算使用Ajax來實(shí)現(xiàn)分頁的話、那么你最好不要使用本插件、若使用的話反而很麻煩、本插件主要是為使用Ajax技術(shù)交互的網(wǎng)站所準(zhǔn)備、可以很方便的嵌入到網(wǎng)站系統(tǒng)中、實(shí)現(xiàn)Ajax分頁功能、如果大家覺得這個(gè)效果不是很好看的話、可以自己重寫分頁按鈕的樣式哈
HTML代碼很簡(jiǎn)單、只要準(zhǔn)備一個(gè)用于分頁代碼的DIV就可以了
<div class="tcdPageCode"></div>
通過jQuery的方式調(diào)用即可
$(".tcdPageCode").createPage({
pageCount:6,
current:1,
backFn:function(p){
console.log(p);
}
});
您可能感興趣的文章:
- jQuery Pagination Ajax分頁插件(分頁切換時(shí)無刷新與延遲)中文翻譯版
- jquery分頁插件jquery.pagination.js使用方法解析
- Jquery 分頁插件之Jquery Pagination
- 最實(shí)用的jQuery分頁插件
- 分享一個(gè)自己動(dòng)手寫的jQuery分頁插件
- Ajax分頁插件Pagination從前臺(tái)jQuery到后端java總結(jié)
- jQuery ajax分頁插件實(shí)例代碼
- 基于bootstrap3和jquery的分頁插件
- jQuery插件分享之分頁插件jqPagination
- jquery ajax分頁插件的簡(jiǎn)單實(shí)現(xiàn)
- jquery+css3打造一款ajax分頁插件(自寫)
- jQuery實(shí)現(xiàn)的分頁插件完整示例
相關(guān)文章
防止jQuery ajax Load使用緩存的方法小結(jié)
本篇文章主要是對(duì)防止jQuery ajax Load使用緩存的方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-02-02
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)彈幕特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-11-11
使用CSS樣式position:fixed水平滾動(dòng)的方法
這篇文章主要介紹了使用CSS樣式position:fixed水平滾動(dòng)的方法,需要的朋友可以參考下2014-02-02
基于JQuery實(shí)現(xiàn)圖片輪播效果(焦點(diǎn)圖)
這篇文章主要為大家詳細(xì)介紹了基于JQuery實(shí)現(xiàn)圖片輪播效果，利用Jquery制作焦點(diǎn)圖左右輪播特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-02-02
jQuery 對(duì)Select的操作備忘記錄，整理的比較全，并且附有詳細(xì)的說明。2011-07-07
jquery?操作DOM的基本用法分享，使用jquery的朋友可以參考下，方便以后對(duì)dom操作2012-04-04
jQuery 中$(this).index與$.each的使用指南
這篇文章主要介紹了jQuery 中$(this).index與$.each的使用方法，以及使用環(huán)境，有需要的小伙伴自己參考下吧2014-11-11
關(guān)于jQuery新的事件綁定機(jī)制on()的使用技巧
本篇文章介紹了，關(guān)于jQuery新的事件綁定機(jī)制on()的使用技巧。需要的朋友參考下2013-04-04
使用JQuery實(shí)現(xiàn)智能表單驗(yàn)證功能
表單驗(yàn)證功能在項(xiàng)目中經(jīng)常會(huì)用得到，接下來給大家介紹使用jquery實(shí)現(xiàn)智能表單驗(yàn)證功能實(shí)例代碼，對(duì)jquery實(shí)現(xiàn)表單驗(yàn)證功能相關(guān)資料感興趣的朋友一起學(xué)習(xí)吧2016-03-03
jquery zTree異步加載簡(jiǎn)單實(shí)例分享
Ztree是一個(gè)使用jQuery實(shí)現(xiàn)的JSP頁面的各種功能樹，本文介紹一個(gè)異步獲取數(shù)據(jù)到下拉樹的實(shí)現(xiàn)方式,感興趣的朋友可以了解下，或許對(duì)你學(xué)習(xí)ztree有所幫助2013-02-02