jQuery 分頁插件（jQuery.pagination.js）ajax 實現分頁
阿新 • • 發佈：2017-07-17
height var 實現 before 狀態 pin 好的 調用 是否
首先需要引入jQuery
再次需要引入
<script src="jquery/jquery.pagination.js"></script>
同時也要引入
<link rel="stylesheet" href="css/pagination.css">
引入之後，分頁基本樣子
下面看分頁配置參數
var defaults = {
totalData: 0, //數據總條數
showData: 0, //每頁顯示的條數
pageCount: 9, //總頁數,默認為9
current: 1, //當前第幾頁
prevCls: ‘prev‘, //上一頁class
nextCls: ‘next‘, //下一頁class
prevContent: ‘<‘, //上一頁內容
nextContent: ‘>‘, //下一頁內容
activeCls: ‘active‘, //當前頁選中狀態
coping: false, //首頁和尾頁
isHide: false, //當前頁數為0頁或者1頁時不顯示分頁
homePage: ‘‘, //首頁節點內容
endPage: ‘‘, //尾頁節點內容
keepShowPN: false, //是否一直顯示上一頁下一頁
count: 3, //當前頁前後分頁個數
jump: false, //跳轉到指定頁數
jumpIptCls: ‘jump-ipt‘, //文本框內容
jumpBtnCls: ‘jump-btn‘, //跳轉按鈕
jumpBtn: ‘跳轉‘, //跳轉按鈕文本
callback: function(){} //回調
};
前臺頁面
備註：text是放內容的，也就是存放數據的
M-box1是實現分頁
函數聲明，插件封裝好的函數
var totaldata = 20;
var size = 2;
$(function(){
$(‘.M-box1‘).pagination({
totalData: totaldata,（總條數）
showData:size,（每頁顯示幾條）
coping:true,（顯示首頁和尾頁）
jumpIptCls: ‘jump-ipt‘, //文本框內容
jumpBtnCls: ‘jump-btn‘, //跳轉按鈕
jumpBtn: ‘跳轉‘,
callback:function (val) {
var pag= val.getCurrent();
console.log(pag);（回調函數實現點擊每一頁可以獲取數據）
ajax_asyc(‘get‘,‘http://www.dcw.com/index_page‘,pag)（請求方式、後臺接口、當前第幾頁）
}
});
})
下面開始請求數據
// 請求數據（函數聲明）（形參）
function ajax_asyc(method,url,pagesize) {
console.log(pagesize);
$.ajax({
type:method,
url:url,
data:{"page": pagesize},
dataType:‘json‘,
beforeSend:function () {
},
success:function (response) {
console.log(response);
if(response.status==1){
load_page_content(response.data)
}else {
}
},
error:function (xhr) {
},
complete:function (xhr) {
}
}) ;
請求到數據將數據添加在頁面上（剛開始我是先寫的靜態頁面，所以我請求數據，現在就把前臺的HTML+請求的數據，最終顯示在頁面上）
function load_page_content(data) {
// 設置父容器為空
$(".text").empty();（一定要保證父容器為空）
for(index in data){
var html=‘‘;
var list=data[index];
html +=‘<div id="mo-one"></div>‘
html +=‘<div class="panel-top clearfix"><p class="left"><img src="img/wen.png" class="mark"><img id="picture" src="‘+list.avatar+‘"><span id="username">‘+list.nickname+‘</span></p><p class="right" style="margin-right:30px;"><img src="img/zhong.png" ><span style="width:50px;text-align: center">‘+list.member_id+‘</span><img src="img/eye.png" ><span style="width:80px;text-align: center">‘+list.update_time+‘</span></p></div>‘
html +=‘<div class="panel-mid"><p>誰能告訴我福彩怎麽查詢開獎結果？謝謝</p><div>‘
html +=‘<div class="panel-bottom"><p><img src="img/huida.png" ><span>熱門回答</span></p><p>cctv-2財經頻道21：20《經濟新聞聯播》。cctv-5頻道21:50-22:00廣播平臺：中央人民廣播電臺中國之聲播出時間21:00。網絡直播搜狐網、騰訊網、中國競彩網、中國足彩在線、中國體彩網、播出時間：</p></div>‘
html +=‘<div class="panel-bottom-two clearfix"><div class="left"><p><span class="icon-關註" class="search" style="font-size:24px;"></span> <span>關註問題</span><span class="icon-個人頁-添加-加關註" class="search" style="font-size:24px;"></span> <span>添加評論</span><span class="icon-個人頁-添加-加關註" class="search" style="font-size:24px;"></span><span>添加答案</span></p></div><div class="right"><p><span class="icon-點贊" class="search" style="font-size:24px;"></span><span>點贊</span><span>‘+list.vote+‘</span><span class="icon-收藏" class="search" style="font-size:24px;"></span><span>收藏</span><span>‘+list.reward+‘</span><span class="icon-分享" class="search" style="font-size:24px;"></span> <span>分享</span><span>‘+list.id+‘</span><img src="img/report%20(2).png" style="width:24px;height:24px;"><span>舉報</span><span>‘+list.hits+‘</span></p></div></div>‘
html +=‘<div id="mo"></div>‘
$(".text").append(html);（將數據添加在class名為text的容器上面）
}
}
下面再來說個問題 ，當頁面打開時，我沒有第一頁的數據，沒有默認數據，所以這時，就要請求第一頁的數據
備註：這代表已經將第一條數據請求到，這屬於函數調用，通過傳參獲取後臺的數據
jQuery 分頁插件（jQuery.pagination.js）ajax 實現分頁