基於jQuery封裝的分頁組件
jquery
分頁
基於
組件
裝的
前言：
由於專案需要實現分頁效果，上jQuery外掛程式庫找了下，但是木有找到自己想要的效果，於是自己封裝了個分頁元件。
想法：
主要是初始化時基於原型建立的分頁模板然後綁定動態事件並實現刷新DOM的分頁效果。
1.page.init.css
1 @charset "utf=8"; 2 *{ 3 box-sizing: border-box; 4 padding: 0; 5 margin: 0; 6 } 7 .page{ 8 font-size: 13px; 9 text-align: right;10 }11 .page .page_to{12 display: inline-block;13 max-width: 250px;14 }15 .page .page_to li{16 display: inline-block;17 width: auto;18 height: auto;19 border: 1px solid #ddd;20 padding:5px 10px;21 border-left-width: 0;22 color: #323232;23 cursor: pointer;24 }25 .page .page_to li.page_hide{26 display: none;27 }28 .page .page_to li:hover{29 color: #32C2CD;30 background-color: #f4f4f4;31 border-color: #DDDDDD;32 }33 .page .page_to li:first-child{34 border-left-width: 1px;35 }36 .page .page_jump{37 display: inline-block;38 width: 180px;39 }40 .page .page_jump input.page_jump_input{41 width: 52px;42 height: 28px;43 text-align: center;44 text-decoration: none;45 background-color: #fff;46 border: 1px solid #ddd;47 margin:0 4px;48 }49 .page .page_jump input.page_jump_btn{50 display: inline-block;51 padding: 7px 20px;52 margin-left: 5px;53 font-size: 14px;54 font-weight: 400;55 line-height: 1.42857143;56 text-align: center;57 white-space: nowrap;58 vertical-align: middle;59 -ms-touch-action: manipulation;60 touch-action: manipulation;61 cursor: pointer;62 -webkit-user-select: none;63 -moz-user-select: none;64 -ms-user-select: none;65 user-select: none;66 border: 1px solid transparent;67 border-radius: 4px;68 background-color: #00BB9C;69 color: #FFFFFF;70 font-weight: bold;71 }登入後複製
2.pageInit.js
1 /** 2 * Created: 2017/6/20. 3 * author: Aaron 4 * address:
5 */ 6 (function($,window,undefined){ 7 8 var curPage='', 9 //跳转是否有值 10 jumpVal='', 11 //从DOM中重新获取数据总数/总页数 12 lists='', 13 totals='', 14 //是否返回值 15 isTrue=false; 16 17 var Page=function(opts){ 18 this.settings= $.extend({},Page.defaults,opts); 19 curPage=this.settings.initPage; 20 totals=this.settings.totalPages; 21 jumpVal=this.settings.inputVal; 22 this.init(); 23 }; 24 25 //默认配置 26 Page.defaults={ 27 container:'.page', 28 setPos:'body', 29 totalPages:null, 30 totalLists:null, 31 initPage:1, 32 inputVal:1, 33 callBack:null 34 }; 35 36 Page.prototype={ 37 init:function(){ 38 this.create(); 39 }, 40 create:function(){ 41 var _template='<div class="page">'+ 42 '<span class="page_details">'+ 43 '共<span class="page_num">'+this.settings.totalLists+'</span>条记录，'+ 44 '第<span class="page_current">'+curPage+'</span>/'+ 45 '<span class="page_size">'+this.settings.totalPages+'</span>页'+ 46 '</span>'+ 47 '<div class="page_to">'+ 48 '<ul class="flex_parent">'+ 49 '<li class="page_first flex_child">首页</li>'+ 50 '<li class="page_pre page_hide flex_child">« 上一页</li>'+ 51 '<li class="page_next flex_child">下一页 »</li>'+ 52 '<li class="page_last flex_child">末页</li>'+ 53 '</ul>'+ 54 '</div>'+ 55 '<div class="page_jump">'+ 56 '<span>第：<input type="number" class="page_jump_input" value="'+this.settings.inputVal+'">页</span>'+ 57 '<input type="button" class="page_jump_btn" value="Go">'+ 58 '</div>'+ 59 '</div>'; 60 $(this.settings.setPos).append(_template); 61 this.refreshDom(); 62 this.bindEvent(); 63 }, 64 bindEvent:function(){ 65 var _this=this; 66 //跳转首页 67 $(this.settings.container).on("click",".page_first",function(){ 68 69 lists=$(_this.settings.container).find(".page_num").text(); 70 totals=$(_this.settings.container).find(".page_size").text(); 71 72 if($.isFunction(_this.settings.callBack)){ 73 curPage=1; 74 isTrue=_this.settings.callBack(1); 75 if(isTrue){ 76 _this.refreshDom(); 77 $(_this.settings.container).find(".page_current").text(1); 78 $(_this.settings.container).find(".page_jump_input").val(curPage); 79 } 80 } 81 }); 82 //跳转上一页 83 $(this.settings.container).on("click",".page_pre",function(){ 84 85 lists=$(_this.settings.container).find(".page_num").text(); 86 totals=$(_this.settings.container).find(".page_size").text(); 87 88 if($.isFunction(_this.settings.callBack)){ 89 if(curPage>1){ 90 curPage=curPage-1; 91 isTrue=_this.settings.callBack(curPage); 92 if(isTrue){ 93 _this.refreshDom(); 94 $(_this.settings.container).find(".page_current").text(curPage); 95 $(_this.settings.container).find(".page_jump_input").val(curPage); 96 } 97 } 98 } 99 });100 //跳转下一页101 $(this.settings.container).on("click",".page_next",function(){102 103 lists=$(_this.settings.container).find(".page_num").text();104 totals=$(_this.settings.container).find(".page_size").text();105 106 107 if($.isFunction(_this.settings.callBack)){108 if(curPage<totals){109 curPage=curPage+1;110 isTrue=_this.settings.callBack(curPage);111 if(isTrue){112 _this.refreshDom();113 $(_this.settings.container).find(".page_current").text(curPage);114 $(_this.settings.container).find(".page_jump_input").val(curPage);115 }116 }117 }118 });119 //跳转末页120 $(this.settings.container).on("click",".page_last",function(){121 122 lists=$(_this.settings.container).find(".page_num").text();123 totals=$(_this.settings.container).find(".page_size").text();124 125 if($.isFunction(_this.settings.callBack)){126 curPage=totals;127 isTrue=_this.settings.callBack(curPage);128 if(isTrue){129 _this.refreshDom();130 $(_this.settings.container).find(".page_current").text(totals);131 $(_this.settings.container).find(".page_jump_input").val(curPage);132 }133 }134 });135 //Go跳转136 $(this.settings.container).on("click",".page_jump_btn",function(){137 138 lists=$(_this.settings.container).find(".page_num").text();139 totals=$(_this.settings.container).find(".page_size").text();140 141 if($.isFunction(_this.settings.callBack)){142 jumpVal=Number($(_this.settings.container).find("input.page_jump_input").val());143 console.log('跳转的页数：'+jumpVal+';跳转之前的页数：'+curPage);144 if(jumpVal>=1 && jumpVal <=totals){145 curPage=jumpVal;146 isTrue=_this.settings.callBack(curPage);147 if(isTrue){148 _this.refreshDom();149 $(_this.settings.container).find(".page_current").text(curPage);150 }151 }else{152 jumpVal=curPage;153 }154 }155 });156 },157 refreshDom:function(){158 $(this.settings.container).find("li.flex_child").removeClass("page_hide");159 if(Number(totals)==1){160 $(this.settings.container).find(".page_pre").addClass("page_hide");161 $(this.settings.container).find(".page_next").addClass("page_hide");162 }163 else if(Number(totals)==2){164 if(Number(curPage)==1){165 $(this.settings.container).find(".page_pre").addClass("page_hide");166 }else{167 $(this.settings.container).find(".page_next").addClass("page_hide");168 }169 }170 else if(Number(curPage)==1 && Number(totals)>2){171 $(this.settings.container).find(".page_pre").addClass("page_hide");172 }173 else if(Number(curPage)==Number(totals) && Number(totals)>2){174 $(this.settings.container).find(".page_next").addClass("page_hide");175 }176 }177 };178 179 var pageInit=function(opts){180 return new Page(opts);181 };182 183 window.pageInit= $.pageInit=pageInit;184 185 })(jQuery,window,undefined);登入後複製
3.元件呼叫
透過 window.pageInit= $.pageInit=pageInit 可完成分頁元件初始化。
暴露出來的介面分別為：
1.container：DOM的容器，預設.page
2.setPos：DOM放置的HTML位置，預設body
3.totalPages：預設的頁數，必填，預設null
4.totalLists：預設的資料總數，必填，預設null
5.initPage：目前頁,預設第一頁
6.inputVal：跳轉頁，預設第一頁
7.callBack：執行的回呼函數，必填，預設null
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>基于jQuery封装的分页组件</title> 6 <link rel="stylesheet" href="css/page.init.css?1.1.11"> 7 </head> 8 <body> 9 <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js?1.1.11"></script>10 <script src="js/pageInit.js?1.1.11"></script>11 <script>12 $.pageInit(13 {14 container:'.page',//容器：默认page15 //setPos:'body',//放置位置：默认body16 totalPages:10,//总页数：必填17 totalLists:100,//数据总数：必填18 initPage:1,//初始页码：默认119 inputVal:1,//设置跳转的input值：默认120 //要执行的函数：默认null，必须为fn且返回true则可执行分页，false则不执行21 callBack:function(n){22 var flag=true;23 console.log(n);24 return flag;25 }26 }27 );28 </script>29 </body>30 </html>登入後複製
效果：
透過callBack接口，加入自己所需要執行的function函數，並且需要return true時才回執行動態的DOM渲染。
以上是基於jQuery封裝的分頁組件的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
Windows 11 KB5054979中的新功能以及如何解決更新問題
3 週前
By DDD
如何修復KB5055523無法在Windows 11中安裝？
2 週前
By DDD
Inzoi：如何申請學校和大學
4 週前
By DDD
如何修復KB5055518無法在Windows 10中安裝？
2 週前
By DDD
Roblox：Dead Rails - 如何召喚和擊敗Nikola Tesla
4 週前
By 尊渡假赌尊渡假赌尊渡假赌
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
jQuery中如何使用PUT請求方式？
Feb 28, 2024 pm 03:12 PM
jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u
Angular元件及其顯示屬性：了解非block預設值
Mar 15, 2024 pm 04:51 PM
Angular框架中元件的預設顯示行為不是區塊級元素。這種設計選擇促進了元件樣式的封裝，並鼓勵開發人員有意識地定義每個元件的顯示方式。透過明確設定CSS屬性 display，Angular組件的顯示可以完全控制，從而實現所需的佈局和響應能力。
jQuery小技巧：快速修改頁面所有a標籤的文本
Feb 28, 2024 pm 09:06 PM
標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：<
jQuery如何移除元素的height屬性？
Feb 28, 2024 am 08:39 AM
jQuery如何移除元素的height屬性？在前端開發中，經常會遇到需要操作元素的高度屬性的需求。有時候，我們可能需要動態改變元素的高度，而有時候又需要移除元素的高度屬性。本文將介紹如何使用jQuery來移除元素的高度屬性，並提供具體的程式碼範例。在使用jQuery操作高度屬性之前，我們首先需要了解CSS中的height屬性。 height屬性用於設定元素的高度
使用jQuery修改所有a標籤的文字內容
Feb 28, 2024 pm 05:42 PM
標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：
PHP數組分頁的最佳實作方式
May 04, 2024 pm 02:39 PM
PHP陣列分頁有兩種最常見的方式：使用array_slice()函數：計算要跳過的元素數量，然後提取指定範圍的元素。使用內建迭代器：實作Iterator接口，rewind()、key()、current()、next()和valid()方法用於遍歷指定範圍內的元素。
了解jQuery中eq的作用及應用場景
Feb 28, 2024 pm 01:15 PM
jQuery是一種流行的JavaScript庫，被廣泛用於處理網頁中的DOM操作和事件處理。在jQuery中，eq()方法是用來選擇指定索引位置的元素的方法，具體使用方法和應用場景如下。在jQuery中，eq()方法選擇指定索引位置的元素。索引位置從0開始計數，即第一個元素的索引是0，第二個元素的索引是1，依此類推。 eq()方法的語法如下：$("s
如何判斷jQuery元素是否具有特定屬性？
Feb 29, 2024 am 09:03 AM
如何判斷jQuery元素是否具有特定屬性？在使用jQuery操作DOM元素時，常會遇到需要判斷元素是否具有某個特定屬性的情況。在這種情況下，我們可以藉助jQuery提供的方法來輕鬆實現這項功能。以下將介紹兩種常用的方法來判斷一個jQuery元素是否具有特定屬性，並附上具體的程式碼範例。方法一：使用attr()方法和typeof運算子//判斷元素是否具有特定屬
