一个最为简单的jquery 分页实现方法！可以用用于理解js分页的原理。
?
?
html 頁面需要的頁面DOM
<div id="pages" style="width:450px;margin:0 auto;"></div>
</div>
?
下面是ajax向后臺傳數據，成功返回數據的部分。（如有不懂請評論提問）
function pull_data(channel_id,daterange,page){
page = page || 1;
$.ajax({
url:window.location.href,
data:{
'channelid':channel_id,
'daterange':daterange,
'page':page
},
type:'POST',
dataType:'json',
?
success:function(object){
// $('#loading').remove();
$('#data-content tbody').html(' ');
if (object.status == "success") {
var str = "";
var pageData=[];
for(var i =0;i<object.data.length;i++){
str = "<tr>\
<td>"+moment(object.data[i].report_date ).format('YYYY-M-D')+"</td>\
<td>"+object.data[i].appid+"</td>\
<td>"+object.data[i].gw_orderid+"</td>\
<td>"+object.data[i].dev_orderid+"</td>\
<td>"+object.data[i].goods_name+"</td>\
<td>"+object.data[i].pay_type+"</td>\
<td>"+object.data[i].pay_fee+"</td>\
<td>"+object.data[i].pay_result+"</td>\
<td>"+object.data[i].callback_result+"</td>\
<td><a href=''>編輯</a></td>\
</tr>";
?
pageData.push[str];
}
?
?
?
$('#data-content tbody').html(str)
//表結尾
?
?
?
$('#pages').html(' ');
var strpage ="";
strpage = '<a id="pre" href ="#" >上一頁</a>';
for(var i=1;i<=PageCount;i++){
strpage +='<a id="page" href="#" selectPage="'+i+'" >'+i+'</a>';
}
strpage +='<a id="next" href="#">下一頁</a>';
$('#pages').html(strpage);
顯示默認頁（第一頁）
$('#table').empty().append(head);
for(i=(currentPage-1)*PageSize;i<PageSize*currentPage;i++){
$('#data-content tbody').append(pageData[i]);
}
?
$('#table').append(end);
顯示選擇頁的內容
$('a').click(function(){
var selectPage=$(this).attr('selectPage');
$('#data-content tbody').html(' ');
for(i=(selectPage-1)*PageSize;i<PageSize*selectPage;i++){
$('#data-content tbody').append(pageData[i]);
}
});
轉載于:https://www.cnblogs.com/Hondsome/p/6054540.html
總結
以上是生活随笔為你收集整理的一个最为简单的jquery 分页实现方法！可以用用于理解js分页的原理。的全部內容，希望文章能夠幫你解決所遇到的問題。
