javascript動(dòng)態(tài)分頁(yè)的實(shí)現(xiàn)方法實(shí)例
之前分頁(yè)都是使用框架給出的分頁(yè)類來實(shí)現(xiàn)分頁(yè),當(dāng)然,體驗(yàn)可能不是那么好。
這次在寫YII2.0框架的后臺(tái)管理系統(tǒng)的小例子的時(shí)候,我這也嘗試了一下前后分離,用ajax來實(shí)現(xiàn)分頁(yè)跳轉(zhuǎn)。
那么前端的頁(yè)碼繪制及跳頁(yè)等其他的樣式,都是由JavaScript根據(jù)后臺(tái)返回的數(shù)據(jù)拼接而成。我的分頁(yè)效果如下圖所示:
大概就是上面的樣子。
Html代碼如下:對(duì)照第一張圖片
<ul> <li><span>1<span data-id="1"></span></span></li> <li><a data-id="2">2</a></li> <li><a data-id="3">3</a></li> <li><a data-id="4">4</a></li> <li><a data-id="5">5</a></li> <li><a data-id="6">6</a></li> <li><a data-id="7">7</a></li> <li><a data-id="8">8</a></li> <li><a data-id="false"> ... </a></li> <li><a data-id="11"> 11 </a></li> <li><a data-id="next"> >> </a></li> </ul>
JavaScript代碼如下:
我這里使用的是純JavaScript代碼,沒有使用jquery,這個(gè)是考慮到兼容性的問題。
/** * @name 繪制分頁(yè) * @author camellia * @date 20200703 * @param pageOptions 這是一個(gè)json對(duì)象 * @param pageTotal 總頁(yè)數(shù) * @param curPage 當(dāng)前頁(yè)數(shù) * @param paginationId 顯示分頁(yè)代碼的上層DOM的id */ function dynamicPagingFunc(pageOptions) { // 總頁(yè)數(shù) var pageTotal = pageOptions.pageTotal || 1; // 當(dāng)前頁(yè) var curPage = pageOptions.curPage || 1; // 獲取頁(yè)面DOM對(duì)象 var paginationId = document.getElementById(''+pageOptions.paginationId+'') || document.getElementById('pagination'); // 如果當(dāng)前頁(yè) 大于總頁(yè)數(shù) 當(dāng)前頁(yè)為1 if(curPage>pageTotal) { curPage =1; } var html = "<ul> "; /*總頁(yè)數(shù)小于5,全部顯示*/ if(pageTotal<=5) { html = appendItem(pageTotal,curPage,html); paginationId.innerHTML = html; } /*總頁(yè)數(shù)大于5時(shí),要分析當(dāng)前頁(yè)*/ if(pageTotal>5) { if(curPage<=4) { html = appendItem(pageTotal,curPage,html); paginationId.innerHTML = html; } else if(curPage>4) { html = appendItem(pageTotal,curPage,html); paginationId.innerHTML = html; } } // 顯示到頁(yè)面上的html字符串 // var html = "<ul> "; // html = appendItem(pageTotal,curPage,html); html += "</ul>"; // 顯示至頁(yè)面中 paginationId.innerHTML = html; } /** * @name 繪制分頁(yè)內(nèi)部調(diào)用方法,根據(jù)不同頁(yè)碼來分析顯示樣式 * @author camellia * @date 20200703 * @param pageTotal 總頁(yè)數(shù) * @param curPage 當(dāng)前頁(yè) * @param html 顯示在頁(yè)面上的html字符串 */ function appendItem(pageTotal,curPage,html) { // 顯示頁(yè) var showPage = 8; // 總頁(yè)數(shù)大于XX頁(yè)的時(shí)候,中間默認(rèn)... var maxPage = 9; // 開始頁(yè) var starPage = 0; // 結(jié)束頁(yè) var endPage = 0; // 首先當(dāng)前頁(yè)不為1的時(shí)候顯示上一頁(yè) if(curPage != 1) { html += "<li><a data-id = 'prev' > << </a></li> "; } // 當(dāng)總頁(yè)數(shù)小于或等于最大顯示頁(yè)數(shù)時(shí),首頁(yè)是1,結(jié)束頁(yè)是最大顯示頁(yè) if(pageTotal <= maxPage) { starPage = 1; endPage = pageTotal; } else if(pageTotal>maxPage && curPage<= showPage) { starPage = 1; endPage = showPage; if(curPage == showPage) { endPage = maxPage; } } else { if(pageTotal == curPage) { starPage = curPage - 3; endPage = curPage; } else { starPage = curPage - 2; endPage = Number(curPage) + 1; } html += "<li><a data-id = '1'> 1 </a></li> "; html += "<li><a data-id='false'> ... </a></li> "; } var i = 1; for(let i = starPage;i <= endPage;i++) { if(i==curPage) { html += "<li ><span>"+ i +"<span data-id="+i+"></span></span></li>"; } else { html += "<li ><a data-id = "+ i +">"+i+"</a></li>"; } } if(pageTotal<=maxPage) { if(pageTotal != curPage) { html += "<li><a data-id='next' > >> </a></li> "; } } else { if(curPage < pageTotal-2) { html += "<li><a data-id='false'> ... </a></li> "; } if(curPage <= pageTotal-2) { html += "<li><a data-id = "+pageTotal+" > "+pageTotal+" </a></li> "; } if(pageTotal != curPage) { html += "<li><a data-id = 'next' > >> </a></li> "; } } return html; }
調(diào)用上邊的分頁(yè)代碼:
// 繪制分頁(yè)碼 var pageOptions = {'pageTotal':result.pageNumber,'curPage':result.page,paginationId:'pages'}; dynamicPagingFunc(pageOptions);
我這里把分頁(yè)的樣式是引用的公共css中的文件,這里就不展示了,將你的分頁(yè)html代碼把我的代碼替換掉就好。
參數(shù)的聚體解釋以及函數(shù)中用到的參數(shù),備注基本都已給出。
下面這部分是點(diǎn)擊各個(gè)頁(yè)碼時(shí),請(qǐng)求數(shù)據(jù)及重回頁(yè)碼的部分
/** * @name 分頁(yè)點(diǎn)擊方法,因?yàn)轫?yè)面html是后生成的,所以需要使用ON方法進(jìn)行綁定 * @author camellia * @date 20200703 */ $(document).on('click', '.next', function() { layer.load(0, {shade: false}); // 獲取當(dāng)前頁(yè)碼 var obj = $(this).attr('data-id'); // 獲取前一頁(yè)的頁(yè)碼,點(diǎn)擊上一頁(yè)以及下一頁(yè)的時(shí)候使用 var curpages = $("li .sr-only").attr('data-id'); // 點(diǎn)擊下一頁(yè)的時(shí)候 if(obj == 'next') { obj = Number(curpages) + 1; } else if(obj == 'prev')// 點(diǎn)擊上一頁(yè)的時(shí)候 { obj = curpages - 1; } $.ajax({ //幾個(gè)參數(shù)需要注意一下 type: "POST",//方法類型 dataType: "json",//預(yù)期服務(wù)器返回的數(shù)據(jù)類型 url: "?r=xxx/xxx-xxx" ,//url data: {'page':obj}, success: function (result) { // 將列表部分的html清空 document.getElementById('tbody').innerHTML = ''; // 重新繪制數(shù)據(jù)列表 drawPage(result.dbbacklist); // 繪制分頁(yè)碼 var pageOptions = {'pageTotal':result.pageNumber,'curPage':result.page,paginationId:'pages'}; dynamicPagingFunc(pageOptions); layer.closeAll(); }, error : function() { alert("異常!"); } }); });
總結(jié)
到此這篇關(guān)于javascript動(dòng)態(tài)分頁(yè)實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)js動(dòng)態(tài)分頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實(shí)現(xiàn)圖片放大預(yù)覽效果
這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片放大預(yù)覽效果,幫助大家更好的理解和制作JavaScript特效,感興趣的朋友可以了解下2020-11-11詳解Javascript中document.execCommand()的用法以及指令參數(shù)列表
execCommand方法是執(zhí)行一個(gè)對(duì)當(dāng)前文檔,當(dāng)前選擇或者給出范圍的命令。在HTML5中,execCommand可以通過JavaScript代碼來調(diào)用,使得開發(fā)者可以在網(wǎng)頁(yè)中實(shí)現(xiàn)一些復(fù)雜的文本操作。在HTML編輯器中這個(gè)命令用得很多,酷炫的強(qiáng)大功能。2023-07-07淺談js使用in和hasOwnProperty獲取對(duì)象屬性的區(qū)別
下面小編就為大家?guī)硪黄獪\談js使用in和hasOwnProperty獲取對(duì)象屬性的區(qū)別。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04