基于jQuery封裝的分頁組件
由于項目需要實現(xiàn)分頁效果,上jQuery插件庫找了下,但是木有找到自己想要的效果,于是自己封裝了個分頁組件。
思路:
主要是初始化時基于原型建立的分頁模板然后綁定動態(tài)事件并實現(xiàn)刷新DOM的分頁效果。
1.page.init.css
@charset "utf=8"; *{ box-sizing: border-box; padding: 0; margin: 0; } .page{ font-size: 13px; text-align: right; } .page .page_to{ display: inline-block; max-width: 250px; } .page .page_to li{ display: inline-block; width: auto; height: auto; border: 1px solid #ddd; padding:5px 10px; border-left-width: 0; color: #323232; cursor: pointer; } .page .page_to li.page_hide{ display: none; } .page .page_to li:hover{ color: #32C2CD; background-color: #f4f4f4; border-color: #DDDDDD; } .page .page_to li:first-child{ border-left-width: 1px; } .page .page_jump{ display: inline-block; width: 180px; } .page .page_jump input.page_jump_input{ width: 52px; height: 28px; text-align: center; text-decoration: none; background-color: #fff; border: 1px solid #ddd; margin:0 4px; } .page .page_jump input.page_jump_btn{ display: inline-block; padding: 7px 20px; margin-left: 5px; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid transparent; border-radius: 4px; background-color: #00BB9C; color: #FFFFFF; font-weight: bold; }
2.pageInit.js
/** * Created: 2017/6/20. * author: Aaron * address: http://www.cnblogs.com/aaron-pan/ */ (function($,window,undefined){ var curPage='', //跳轉(zhuǎn)是否有值 jumpVal='', //從DOM中重新獲取數(shù)據(jù)總數(shù)/總頁數(shù) lists='', totals='', //是否返回值 isTrue=false; var Page=function(opts){ this.settings= $.extend({},Page.defaults,opts); curPage=this.settings.initPage; totals=this.settings.totalPages; jumpVal=this.settings.inputVal; this.init(); }; //默認配置 Page.defaults={ container:'.page', setPos:'body', totalPages:null, totalLists:null, initPage:1, inputVal:1, callBack:null }; Page.prototype={ init:function(){ this.create(); }, create:function(){ var _template='<div class="page">'+ '<span class="page_details">'+ '共<span class="page_num">'+this.settings.totalLists+'</span>條記錄,'+ '第<span class="page_current">'+curPage+'</span>/'+ '<span class="page_size">'+this.settings.totalPages+'</span>頁'+ '</span>'+ '<div class="page_to">'+ '<ul class="flex_parent">'+ '<li class="page_first flex_child">首頁</li>'+ '<li class="page_pre page_hide flex_child">« 上一頁</li>'+ '<li class="page_next flex_child">下一頁 »</li>'+ '<li class="page_last flex_child">末頁</li>'+ '</ul>'+ '</div>'+ '<div class="page_jump">'+ '<span>第:<input type="number" class="page_jump_input" value="'+this.settings.inputVal+'">頁</span>'+ '<input type="button" class="page_jump_btn" value="Go">'+ '</div>'+ '</div>'; $(this.settings.setPos).append(_template); this.refreshDom(); this.bindEvent(); }, bindEvent:function(){ var _this=this; //跳轉(zhuǎn)首頁 $(this.settings.container).on("click",".page_first",function(){ lists=$(_this.settings.container).find(".page_num").text(); totals=$(_this.settings.container).find(".page_size").text(); if($.isFunction(_this.settings.callBack)){ curPage=1; isTrue=_this.settings.callBack(1); if(isTrue){ _this.refreshDom(); $(_this.settings.container).find(".page_current").text(1); $(_this.settings.container).find(".page_jump_input").val(curPage); } } }); //跳轉(zhuǎn)上一頁 $(this.settings.container).on("click",".page_pre",function(){ lists=$(_this.settings.container).find(".page_num").text(); totals=$(_this.settings.container).find(".page_size").text(); if($.isFunction(_this.settings.callBack)){ if(curPage>1){ curPage=curPage-1; isTrue=_this.settings.callBack(curPage); if(isTrue){ _this.refreshDom(); $(_this.settings.container).find(".page_current").text(curPage); $(_this.settings.container).find(".page_jump_input").val(curPage); } } } }); //跳轉(zhuǎn)下一頁 $(this.settings.container).on("click",".page_next",function(){ lists=$(_this.settings.container).find(".page_num").text(); totals=$(_this.settings.container).find(".page_size").text(); if($.isFunction(_this.settings.callBack)){ if(curPage<totals){ curPage=curPage+1; isTrue=_this.settings.callBack(curPage); if(isTrue){ _this.refreshDom(); $(_this.settings.container).find(".page_current").text(curPage); $(_this.settings.container).find(".page_jump_input").val(curPage); } } } }); //跳轉(zhuǎn)末頁 $(this.settings.container).on("click",".page_last",function(){ lists=$(_this.settings.container).find(".page_num").text(); totals=$(_this.settings.container).find(".page_size").text(); if($.isFunction(_this.settings.callBack)){ curPage=totals; isTrue=_this.settings.callBack(curPage); if(isTrue){ _this.refreshDom(); $(_this.settings.container).find(".page_current").text(totals); $(_this.settings.container).find(".page_jump_input").val(curPage); } } }); //Go跳轉(zhuǎn) $(this.settings.container).on("click",".page_jump_btn",function(){ lists=$(_this.settings.container).find(".page_num").text(); totals=$(_this.settings.container).find(".page_size").text(); if($.isFunction(_this.settings.callBack)){ jumpVal=Number($(_this.settings.container).find("input.page_jump_input").val()); console.log('跳轉(zhuǎn)的頁數(shù):'+jumpVal+';跳轉(zhuǎn)之前的頁數(shù):'+curPage); if(jumpVal>=1 && jumpVal <=totals){ curPage=jumpVal; isTrue=_this.settings.callBack(curPage); if(isTrue){ _this.refreshDom(); $(_this.settings.container).find(".page_current").text(curPage); } }else{ jumpVal=curPage; } } }); }, refreshDom:function(){ $(this.settings.container).find("li.flex_child").removeClass("page_hide"); if(Number(totals)==1){ $(this.settings.container).find(".page_pre").addClass("page_hide"); $(this.settings.container).find(".page_next").addClass("page_hide"); } else if(Number(totals)==2){ if(Number(curPage)==1){ $(this.settings.container).find(".page_pre").addClass("page_hide"); }else{ $(this.settings.container).find(".page_next").addClass("page_hide"); } } else if(Number(curPage)==1 && Number(totals)>2){ $(this.settings.container).find(".page_pre").addClass("page_hide"); } else if(Number(curPage)==Number(totals) && Number(totals)>2){ $(this.settings.container).find(".page_next").addClass("page_hide"); } } }; var pageInit=function(opts){ return new Page(opts); }; window.pageInit= $.pageInit=pageInit; })(jQuery,window,undefined);
3.組件調(diào)用
通過 window.pageInit= $.pageInit=pageInit 可完成分頁組件初始化。
暴露出來的接口分別為:
1.container:DOM的容器,默認.page
2.setPos:DOM放置的HTML位置,默認body
3.totalPages:默認的頁數(shù),必填,默認null
4.totalLists:默認的數(shù)據(jù)總數(shù),必填,默認null
5.initPage:當(dāng)前頁,默認第一頁
6.inputVal:跳轉(zhuǎn)頁,默認第一頁
7.callBack:執(zhí)行的回調(diào)函數(shù),必填,默認null
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>基于jQuery封裝的分頁組件</title> <link rel="stylesheet" href="css/page.init.css"> </head> <body> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script> <script src="js/pageInit.js"></script> <script> $.pageInit( { container:'.page',//容器:默認page //setPos:'body',//放置位置:默認body totalPages:10,//總頁數(shù):必填 totalLists:100,//數(shù)據(jù)總數(shù):必填 initPage:1,//初始頁碼:默認1 inputVal:1,//設(shè)置跳轉(zhuǎn)的input值:默認1 //要執(zhí)行的函數(shù):默認null,必須為fn且返回true則可執(zhí)行分頁,false則不執(zhí)行 callBack:function(n){ var flag=true; console.log(n); return flag; } } ); </script> </body> </html>
效果:
通過callBack接口,添加自己所需要執(zhí)行的function函數(shù),并且需要return true時才回執(zhí)行動態(tài)的DOM渲染。
更多精彩內(nèi)容請點擊:jquery分頁功能匯總進行學(xué)習(xí)。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery Ajax自定義分頁組件(jquery.loehpagerv1.0)實例詳解
- 用jQuery中的ajax分頁實現(xiàn)代碼
- JQuery+Ajax無刷新分頁的實例代碼
- 基于jQuery的實現(xiàn)簡單的分頁控件
- jQuery中jqGrid分頁實現(xiàn)代碼
- 基于JQuery的Pager分頁器實現(xiàn)代碼
- jQuery EasyUI API 中文文檔 - Pagination分頁
- jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版
- jQuery EasyUI datagrid實現(xiàn)本地分頁的方法
- jQuery DataTables插件自定義Ajax分頁實例解析
- jQuery學(xué)習(xí)筆記——jqGrid的使用記錄(實現(xiàn)分頁、搜索功能)
- jQuery從零開始做一個分頁組件功能示例
相關(guān)文章
以jQuery中$.Deferred對象為例講解promise對象是如何處理異步問題
Promises是一種令代碼異步行為更加優(yōu)雅的抽象,它很有可能是JavaScript的下一個編程范式,一個Promise即表示任務(wù)結(jié)果,無論該任務(wù)是否完成。本文以jQuery中$.Deferred對象為例講解promise對象是如何處理異步問題,需要的朋友參考下2015-11-11jquery ajax學(xué)習(xí)筆記2 使用XMLHttpRequest對象的responseXML
使用XMLHttpRequest對象的responseXML的方式來接受XML數(shù)據(jù)對象的DOM對象2011-10-10通過點擊jqgrid表格彈出需要的表格數(shù)據(jù)
在眾多的表格插件中,jqgrid的特點是非常鮮明的,所以jqgrid表格插件用處非常廣泛,本篇文章給大家介紹通過點擊jqgrid表格彈出需要的表格數(shù)據(jù),需要的朋友參考下2015-12-12jQuery Attributes(屬性)的使用(二、類篇)
本系列文章主要講述jQuery框架的屬性(Attributes)使用方法,我將以實例方式進行講述,以簡單,全面為基礎(chǔ),不會涉及很深,我的學(xué)習(xí)方法:先入門,后進階!2009-12-12