tp中的page类可以生成翻页,但是只能是刷新分页,通过js对a标签进行修改,可以实现无刷新分页
实现方法
1. 通过tp page类生成分页数据和页码
2. 建立table模板并渲染后使用fetch方法获取渲染后的内容并返回
3. 将返回的内容输出到页码并通过js page方法进行翻页
下面是page方法的实现:
/**
* page方法
* @params
* urlquery string 请求查询的url地址
* p int 页码
* pagecount int 每页显示条数
* @return
* 服务器返回的info信息,alert弹出
**/
function page(urlquery,p,pagecount){
//设置页码的默认值
p = arguments[1]?arguments[1]:1;
//设置每页显示条数的默认值
pagecount = arguments[2]?arguments[2]:10;
//通过page类实现无刷新分页必须使用get请求(很重要)
$.get(urlquery,{p:p,page:pagecount},function(res){
if(res.status){
//请求成功隐藏loading
$("#loading").css("display","none");
//输出返回内容
$("#pagetable").html(res.data);
var linka = $(".pagination a");
//将所有翻页的a标签的href设置不能点击
linka.attr("href","javascript:void(0)");
//获取当前页码
p = $(".pagination .active span").text();
//给每个a标签添加点击事件
linka.click(function(){
//有name属性的为数字页码,class属性为string页码
var pagename = $(this).attr("name");
if(pagename){
p = pagename;
}else{
pagename = $(this).attr("class");
//string页码计算
if(pagename == 'next'){
p++;
}else if(pagename == 'prev'){
p--;
}else if(pagename == 'first'){
p = 1;
}else if(pagename == 'end'){
p = $(this).text();
}
}
//点击事件调用自身传递参数
page(urlquery,p,pagecount);
});
}
// return window.alert(res.info);
});
}
- 1
- 2
- 3
通过这个page方法可以将tp的page类转换为无刷新分页,这样就能实现刷新分页和无刷新分页共存一套系统