最新消息:文章中包含代码时,请遵守代码高亮规范!

网站端ajax分页方法【原创】

HTML+CSS Niki 42浏览 0评论

写网页的时候很多页面都有分页,即使样式有所不同但是分页的思想方法都是相同的,现在来看下,套过模板之后的ajax分页公共方法


//-----------------------------分页公共方法-----------------------
var now_page;
var at_page = 1;
function page() {
if(all_page > 0 && Math.ceil(all_page / 10)>1 ) {
if (all_page > 10) {
now_page = Math.ceil(all_page / 10);
} else {
now_page = 1;
}
$('.pageul').html('');
var html = '';
html += '<li class="left10">';
html += ' <a class="right-arrow"></a>';
html += '</li>';
for (page_at = now_page; page_at > 0; page_at--) {
if (at_page == page_at) {
var is_class = "redb";
} else {
var is_class = "";
}
html += '<li class="page-num ' + is_class + '">';
html += ' <a>' + page_at + '</a>';
html += '</li>';
}
html += '<li class="right10">';
html += ' <a class="left-arrow"></a>';
html += '</li>';
$('.pageul').html(html);
}else{
$('.pageul').html('');
}
}

// ------------------------下一页-------------
$('body').on('click','.right-arrow',function () {
var page = 1;
page += parseInt(at_page);
if(page<=now_page){
page_at = page;
post_ajax();
}
});

// ----------------------上一页-------------------
$('body').on('click','.left-arrow',function () {
var page = at_page-1;
if(page>=1){
page_at=page;
post_ajax();
}
});

// -------------------------
$('body').on('click','.page-num',function () {
page_at = $(this).text();
post_ajax();
});

其中的all_page(列表的总数量)可以是dunp里面的数据,也可以是ajax返回的数据

post_ajax()是加载ajax数据方法,每次点击页码的时候访问ajax

at_page是控制页码的高亮,当前所在的 页面(后台ajax返回)

html页面格式代码


<!----------------- 分页部分----------------->

<div class="page">

<ul class="pageul">
</ul>

</div>


代码可用在公共方法中,可复用。

是不是应该拿去试一下

 

转载时请注明出处及相应链接,本文永久地址:http://blog.it985.com/22147.html


pay_weixin
pay_weixin
微信打赏
pay_weixin
支付宝打赏
感谢您对作者Niki的打赏,我们会更加努力!    如果您想成为作者,请点我

您必须 登录 才能发表评论!