Jquery 分頁外掛， 帶你一步一步接入後臺資料
阿新 • • 發佈：2018-11-09
目錄
一、效果圖
二、分頁 js 原始碼講解
新建一個 js 檔案，基本直接複製貼上就行，記得引入到需要的頁面中。
需要注意的是：
前面的建構函式，是用來初始化前端分頁的，在需要實現分頁的頁面的 js 檔案中呼叫這個建構函式，進行分頁的初始化。
後面的 JumpToPage(pageIndex); 函式，是用來實現頁面跳轉的，是在需要實現分頁的頁面的 js 檔案中去實現這個函式。
到這裡如果還不知道是什麼意思，或者怎麼實現的，沒事！！！直接往下看。
(function($, window, document) { // 定義建構函式 function Paging(el, options) { this.el = el; this.options = { pageNo : options.initPageNo || 1, // 初始頁碼 totalPages : options.totalPages || 1, // 總頁數 totalCount : options.totalCount || '', // 條目總數 slideSpeed : options.slideSpeed || 0, // 緩動速度 jump : options.jump || false, // 支援跳轉 callback : options.callback || function() { } // 回撥函式 }; this.init(); } // 給例項物件新增公共屬性和方法 Paging.prototype = { constructor : Paging, init : function() { this.createDom(); this.bindEvents(); }, createDom : function() { var that = this, ulDom = '', jumpDom = '', content = '', liWidth = 60, // li的寬度 totalPages = that.options.totalPages, // 總頁數 wrapLength = 0; totalPages > 5 ? wrapLength = 5 * liWidth : wrapLength = totalPages * liWidth; for (var i = 1; i <= that.options.totalPages; i++) { i != 1 ? ulDom += '<li>' + i + '</li>' : ulDom += '<li class="sel-page">' + i + '</li>'; } that.options.jump ? jumpDom = '<input type="text" placeholder="1" class="jump-text" id="jumpText"><button type="button" class="jump-button" id="jumpBtn">跳轉</button>' : jumpDom = ''; content = '<button type="button" id="firstPage" class="turnPage first-page">首頁</button>' + '<button class="turnPage" id="prePage">上一頁</button>' + '<div class="pageWrap" style="width:' + wrapLength + 'px">' + '<ul id="pageSelect" style="transition:all ' + that.options.slideSpeed + 'ms">' + ulDom + '</ul></div>' + '<button class="turnPage" id="nextPage">下一頁</button>' + '<button type="button" id="lastPage" class="last-page">尾頁</button>' + jumpDom + '<p class="total-pages">共 ' + that.options.totalPages + ' 頁</p>' + '<p class="total-count">' + that.options.totalCount + '</p>'; that.el.html(content); }, bindEvents : function() { var that = this, pageSelect = $('#pageSelect'), // ul lis = pageSelect.children(), // li的集合 liWidth = lis[0].offsetWidth, // li的寬度 totalPages = that.options.totalPages, // 總頁數 pageIndex = that.options.pageNo, // 當前選擇的頁碼 distance = 0, // ul移動距離 prePage = $('#prePage'), nextPage = $('#nextPage'), firstPage = $('#firstPage'), lastPage = $('#lastPage'), jumpBtn = $('#jumpBtn'), jumpText = $('#jumpText'); prePage.on('click', function() { pageIndex--; if (pageIndex < 1) pageIndex = 1; handles(pageIndex); }) nextPage.on('click', function() { pageIndex++; if (pageIndex > lis.length) pageIndex = lis.length; handles(pageIndex); }) firstPage.on('click', function() { pageIndex = 1; handles(pageIndex); }) lastPage.on('click', function() { pageIndex = totalPages; handles(pageIndex); }) jumpBtn.on('click', function() { var jumpNum = parseInt(jumpText.val().replace(/\D/g, '')); if (jumpNum && jumpNum >= 1 && jumpNum <= totalPages) { pageIndex = jumpNum; handles(pageIndex); jumpText.val(jumpNum); } }) lis.on('click', function() { pageIndex = $(this).index() + 1; handles(pageIndex); }) function handles(pageIndex) { /* * =========== 在需要分頁的頁面寫對應的js程式碼 ================ */ JumpToPage(pageIndex); /* * =========== 在需要分頁的頁面寫對應的js程式碼 ================ */ lis.removeClass('sel-page').eq(pageIndex - 1).addClass( 'sel-page'); if (totalPages <= 5) { that.options.callback(pageIndex); return false; } if (pageIndex >= 3 && pageIndex <= totalPages - 2) distance = (pageIndex - 3) * liWidth; if (pageIndex == 2 || pageIndex == 1) distance = 0; if (pageIndex > totalPages - 2) distance = (totalPages - 5) * liWidth; pageSelect .css('transform', 'translateX(' + (-distance) + 'px)'); pageIndex == 1 ? firstPage.attr('disabled', true) : firstPage .attr('disabled', false); pageIndex == 1 ? prePage.attr('disabled', true) : prePage.attr( 'disabled', false); pageIndex == totalPages ? lastPage.attr('disabled', true) : lastPage.attr('disabled', false); pageIndex == totalPages ? nextPage.attr('disabled', true) : nextPage.attr('disabled', false); that.options.callback(pageIndex); } ; } } $.fn.paging = function(options) { return new Paging($(this), options); } })(jQuery, window, document);
三、分頁樣式 css 原始碼
新建一個 css 檔案，直接複製貼上就行。記得引入到需要的頁面中。
如果對樣式不滿意，可以自己根據註釋修改。
* { margin: 0; padding: 0; list-style: none; } .fl { float: left; } .box { height: 30px; line-height: 30px; margin-top: 10px;; text-align: center; } /*設定“首頁”“上一頁”“下一頁”“尾頁”“跳轉”5個按鈕的樣式*/ .box button { padding: 0 10px; color:#5A98DE; height: 30px; float: left; cursor: pointer; border: 1px solid #ebebeb; background-color: #ffffff; } .box .first-page, .box .last-page { margin: 0; } .box .pageWrap { /*把多餘的頁碼給隱藏起來*/ height: 30px; float: left; overflow: hidden; } .box .pageWrap ul { width: 100000px; /*設定數字按鈕的滾動長度*/ height: 30px; float: left; } /*設定數字按鈕的樣式*/ .box .pageWrap ul li { width: 40px; /**/ height: 30px; border: 1px solid #ebebeb; line-height: 30px; box-sizing: border-box; cursor: pointer; float: left; } /*設定數字按鈕被選中時候的按鈕背景顏色*/ .box .pageWrap ul .sel-page { background-color: #5A98DE; } /*設定跳轉頁數的文字框的樣式*/ .box .jump-text { width: 40px; height: 30px; box-sizing: border-box; text-align: center; float: left; } /*設定跳轉按鈕的樣式*/ .box .jump-button { margin: 0; float: left; } /*設定顯示總頁數和總條數的樣式*/ .box .total-pages, .box .total-count { margin-left: 10px; float: left; font-size: 14px; }
三、實現前後臺對接
1.在需要用到的頁面引入上面的 js 程式碼和 css 程式碼。
2.在頁面的 html 程式碼中的對應要顯示分頁的地方補上這句程式碼：
<div class="box" id="box"></div>3.獲取資料
後臺通過 PageHelper 實現分頁後將相關資料（包括需要顯示的資料，總的條數，當前的頁數等）傳給前端，這時候前端就需要接收後臺的資料，然後進行前端分頁的初始化。
關於 PageHelper 後臺分頁，不會用的話，可以看下我的另外一篇部落格：
我前端選擇使用 ajax 來接受資料（不懂的可以學一下，不難的 ）。
在需要分頁的頁面的 js 檔案中，編寫以下的程式碼：
function loading(pagenum){
$.ajax({
type:"POST",
url:"/hstc_manage/display_admin",
dataType:"json",
data:{
pagenum:pagenum
},
success:function(data){
/*totalData 總資料 totalPage 總頁數*/
/* pagenum == 1 的時候，才需要對分頁外掛進行初始化 */
if( pagenum == 1){
paging(data.totalData,data.totalPage,pagenum);
}
/*資料渲染*/
/*自定義的函式，可以根據自己的需求來寫*/
displayData(data.tAdmin);
},
error:function(){
alert("管理員列表資訊獲取失敗！");
}
});
}在需要分頁的頁面的 js 檔案中，編寫前端分頁初始化的程式碼：
關於引數都已經打了註釋，看以下就知道什麼意思了。
function paging(totalData,totalPage,pagenum){
$('#box').paging({
initPageNo: pagenum, // 初始頁碼
totalPages: totalPage, //總頁數
totalCount: '合計' + totalData + '條資料', // 條目總數
slideSpeed: 600, // 緩動速度 單位毫秒
jump: true, //是否支援跳轉
callback: function(page) {
// 回撥函式
}
});
}前面提到的 JumpToPage(pageIndex) 函式，也需要在需要分頁的頁面的 js 檔案中實現：
function JumpToPage(pagenum){
loading(pagenum);
}到這裡，前端與後臺，已對接了哦！
如果你還有什麼疑問的話，可以在評論區提問，大家一起學習進步。