基于原生JS實現(xiàn)分頁效果的示例代碼
這個只是一個分頁的demo,主要是思路整理(很久之前項目用的東西)
分頁實現(xiàn)的效果 主要是 左側(cè)上一頁 右側(cè)是下一頁 中間顯示主要是超過5個顯示 省略號 然后是可配置選項
實現(xiàn)之后的效果
首先需要初始化該對象的一些基本屬性,顯示總頁碼數(shù),中間顯示的頁面數(shù), 添加一個回調(diào)函數(shù),在頁面變化激活回調(diào)函數(shù)并返回當前頁面和一些需要的其他參數(shù) init為對象初始化的方法(里面的參數(shù)都是可以寫成活的,我這里偷懶了所以寫成死的了) 這個里的 z_page 可以接是接口返回的總頁數(shù)
function Page(obj) { this.obj = obj||{page:1,page_count: 0}; this.z_page = 7; // 一共顯示的頁碼數(shù) this.show_page = this.z_page-2; // 中間顯示多少個頁碼 必須是個基數(shù)好看 this.fn = this.obj.block; this.init() }
在init在初始化方法里主要是判斷
1 總頁數(shù)是否小于顯示頁面(這個主要是判斷是否顯示省略號,添加省略號比較麻煩,這個是總頁數(shù)少不用添加)
2 當前頁面數(shù)+左右顯示的平均數(shù)(show_page/2-1)+1和總頁面相比 這個主要判斷省略號在前面的問題(靠近尾頁)前面有省略號
3 左右顯示的平均數(shù)(show_page/2-1)+2(最前面1 和最后的書)大于當前頁面數(shù)(靠近首頁)
第一個圖片(后面有省略號)
4 剩下的狀態(tài)就是中間狀態(tài)(兩側(cè)有省略號)
這個判斷其實也是要判斷咱們分頁的邊界條件,如果這個想好了并且實現(xiàn)了 相當于就完成了一半 初始化方法的最后是要給上一頁和下一頁,有數(shù)字的頁簽 添加點擊事件 并且做相應邏輯處理 代碼的實現(xiàn)
Page.prototype.create = function () { // page:1 page_count 17 // 保證被點擊的頁數(shù)在中間 var ping = (this.show_page-1)/2; // 左右顯示的平均數(shù) 在中間 var num = this.obj.page-ping; // 最小頁碼 var endnum = (this.obj.page+ping)>this.obj.page_count?this.obj.page_count:(this.obj.page+ping) // 最大頁碼 console.log(endnum); var pageID = document.getElementById('pageID'); var self= this; pageID.innerHTML = ''; num = num<1?1:num; if (this.obj.page_count<= this.z_page) { alert('smallPage'); this.smallPage() } else if( (this.obj.page+ping+1)>=this.obj.page_count) {// 還要加上最后一個 接近尾頁 pageID.appendChild(this.nearBack()) console.log('尾巴') } else if ((ping+2)>=(this.obj.page)) { //3 接近首頁 pageID.appendChild( this.nearHome()) console.log('臨近首頁') }else { console.log(num,endnum); pageID.appendChild(this.centerPage(num,endnum)); } document.onclick = function (event) { switch (event.target.className) { case 'previous': self._previous(); break; case 'next': self._next(); break; default: self.clickLi(event.target); } self.fn(self.obj.page) } };
剩下的就是只想邏輯和dom操作了 因為是用的原生js,這里是用的文檔碎片,把我生成的dom全部都放到文檔碎片里,然后一次性返出來 直接append到body上 這個是我的方法代碼
Page.prototype.nearBack = function () { var oFragmeng = document.createDocumentFragment(); // 創(chuàng)建了一個文檔碎片 var ul = document.createElement('ul') var Div = oFragmeng.appendChild(ul); Div.innerHTML = '<li>1</li><li>....</li>'; for (var m=(this.obj.page_count- this.show_page);m<=this.obj.page_count;m++) { var li1 = document.createElement('li'); li1.innerHTML = m; if (m===this.obj.page) { li1.className = 'active' } Div.appendChild(li1) } return oFragmeng.firstChild; };
總結(jié):分頁 也會和你實現(xiàn)的分頁效果不同,實現(xiàn)方式也有區(qū)別,但是核心思想是一樣的。
到此這篇關于基于原生JS實現(xiàn)分頁效果的示例代碼的文章就介紹到這了,更多相關JS分頁效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JS組件Bootstrap dropdown組件擴展hover事件
bootstrap的下拉組件,需要點擊click時,方可展示下拉列表。因此對于喜歡簡單少操作的大家來說,點擊一下多少帶來不便,因此,引入hover監(jiān)聽,鼠標經(jīng)過自動展示下拉框。這篇文章主要介紹了JS組件Bootstrap dropdown組件擴展hover事件,感興趣的小伙伴們可以參考一下2016-04-04解決bootstrap-select 動態(tài)加載數(shù)據(jù)不顯示的問題
今天小編就為大家分享一篇解決bootstrap-select 動態(tài)加載數(shù)據(jù)不顯示的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08JS實現(xiàn)為動態(tài)創(chuàng)建的元素添加事件操作示例
這篇文章主要介紹了JS實現(xiàn)為動態(tài)創(chuàng)建的元素添加事件操作,涉及javascript頁面元素動態(tài)添加及事件響應相關操作技巧,需要的朋友可以參考下2018-03-03