javascript實現動態分頁_camellia

持續創作，加速成長！這是我參與「掘金日新計劃 · 6 月更文挑戰」的第28天，點選檢視活動詳情

之前分頁都是使用框架給出的分頁類來實現分頁，當然，體驗可能不是那麼好。

這次在寫YII2.0框架的後臺管理系統的小例子的時候，我這也嘗試了一下前後分離，用ajax來實現分頁跳轉。

那麼前端的頁碼繪製及跳頁等其他的樣式，都是由JavaScript根據後臺返回的資料拼接而成。我的分頁效果如下圖所示：

大概就是上面的樣子。

Html程式碼如下：對照第一張圖片

```

JavaScript程式碼如下：

我這裡使用的是純JavaScript程式碼，沒有使用jquery，這個是考慮到相容性的問題。

/** * @name 繪製分頁 * @author camellia * @date 20200703 * @param pageOptions 這是一個json物件 * @param pageTotal 總頁數 * @param curPage 當前頁數 * @param paginationId 顯示分頁程式碼的上層DOM的id */ function dynamicPagingFunc(pageOptions) { // 總頁數 var pageTotal = pageOptions.pageTotal || 1; // 當前頁 var curPage = pageOptions.curPage || 1; // 獲取頁面DOM物件 var paginationId = document.getElementById(''+pageOptions.paginationId+'') || document.getElementById('pagination'); // 如果當前頁大於總頁數當前頁為1 if(curPage>pageTotal) { curPage =1; } var html = "<ul> "; /*總頁數小於5，全部顯示*/ if(pageTotal<=5) { html = appendItem(pageTotal,curPage,html); paginationId.innerHTML = html; } /*總頁數大於5時，要分析當前頁*/ 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; } } // 顯示到頁面上的html字串 // var html = "<ul> "; // html = appendItem(pageTotal,curPage,html); html += "</ul>"; // 顯示至頁面中 paginationId.innerHTML = html; } /** * @name 繪製分頁內部呼叫方法，根據不同頁碼來分析顯示樣式 * @author camellia * @date 20200703 * @param pageTotal 總頁數 * @param curPage 當前頁 * @param html 顯示在頁面上的html字串 */ function appendItem(pageTotal,curPage,html) { // 顯示頁 var showPage = 8; // 總頁數大於XX頁的時候，中間預設... var maxPage = 9; // 開始頁 var starPage = 0; // 結束頁 var endPage = 0; // 首先當前頁不為1的時候顯示上一頁 if(curPage != 1) { html += "<li><a data-id = 'prev' > << </a></li> "; } // 當總頁數小於或等於最大顯示頁數時，首頁是1，結束頁是最大顯示頁 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; }

呼叫上邊的分頁程式碼：

// 繪製分頁碼 var pageOptions = {'pageTotal':result.pageNumber,'curPage':result.page,paginationId:'pages'}; dynamicPagingFunc(pageOptions);

我這裡把分頁的樣式是引用的公共css中的檔案，這裡就不展示了，將你的分頁html程式碼把我的程式碼替換掉就好。

引數的聚體解釋以及函式中用到的引數，備註基本都已給出。

下面這部分是點選各個頁碼時，請求資料及重回頁碼的部分

/** * @name 分頁點選方法，因為頁面html是後生成的，所以需要使用ON方法進行繫結 * @author camellia * @date 20200703 */ $(document).on('click', '.next', function() { layer.load(0, {shade: false}); // 獲取當前頁碼 var obj = $(this).attr('data-id'); // 獲取前一頁的頁碼，點選上一頁以及下一頁的時候使用 var curpages = $("li .sr-only").attr('data-id'); // 點選下一頁的時候 if(obj == 'next') { obj = Number(curpages) + 1; } else if(obj == 'prev')// 點選上一頁的時候 { obj = curpages - 1; } $.ajax({ //幾個引數需要注意一下 type: "POST",//方法型別 dataType: "json",//預期伺服器返回的資料型別 url: "?r=xxx/xxx-xxx" ,//url data: {'page':obj}, success: function (result) { // 將列表部分的html清空 document.getElementById('tbody').innerHTML = ''; // 重新繪製資料列表 drawPage(result.dbbacklist); // 繪製分頁碼 var pageOptions = {'pageTotal':result.pageNumber,'curPage':result.page,paginationId:'pages'}; dynamicPagingFunc(pageOptions); layer.closeAll(); }, error : function() { alert("異常！"); } }); });

有好的建議，請在下方輸入你的評論。

歡迎訪問個人部落格：https://guanchao.site

歡迎訪問我的小程式：開啟微信->發現->小程式->搜尋“時間裡的”