基于jquery的php分页,基于jQuery封装的分页组件
前言：
由于項目需要實現(xiàn)分頁效果，上jQuery插件庫找了下，但是木有找到自己想要的效果，于是自己封裝了個分頁組件。
思路：
主要是初始化時基于原型建立的分頁模板然后綁定動態(tài)事件并實現(xiàn)刷新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 //跳轉(zhuǎn)是否有值 10 jumpVal='', 11 //從DOM中重新獲取數(shù)據(jù)總數(shù)/總頁數(shù) 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 //默認(rèn)配置 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='
'+ 42 ''+ 43 '共'+this.settings.totalLists+'條記錄，'+ 44 '第'+curPage+'/'+ 45 ''+this.settings.totalPages+'頁'+ 46 ''+ 47 ''+ 48 '- '+ 49 '
- 首頁'+ 50 '
- ? 上一頁'+ 51 '
- 下一頁 ?'+ 52 '
- 末頁'+ 53 '
3.組件調(diào)用
通過 window.pageInit= $.pageInit=pageInit 可完成分頁組件初始化。
暴露出來的接口分別為：
1.container：DOM的容器，默認(rèn).page
2.setPos：DOM放置的HTML位置，默認(rèn)body
3.totalPages：默認(rèn)的頁數(shù)，必填，默認(rèn)null
4.totalLists：默認(rèn)的數(shù)據(jù)總數(shù)，必填，默認(rèn)null
5.initPage：當(dāng)前頁,默認(rèn)第一頁
6.inputVal：跳轉(zhuǎn)頁，默認(rèn)第一頁
7.callBack：執(zhí)行的回調(diào)函數(shù)，必填，默認(rèn)null
1 2 3
4 5 基于jQuery封裝的分頁組件 6 7 8 9 10 11 29 30效果：
通過callBack接口，添加自己所需要執(zhí)行的function函數(shù)，并且需要return true時才回執(zhí)行動態(tài)的DOM渲染。
總結(jié)
以上是生活随笔為你收集整理的基于jquery的php分页,基于jQuery封装的分页组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： js跳转传递php参数,将JS / Jq
- 下一篇： MySQL删除退出后数据未更新,mysq