您的位置:首页 > Web前端 > JQuery

一个最为简单的jquery 分页实现方法!可以用用于理解js分页的原理。

2016-11-11 15:52 956 查看
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]);

}

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐