基于TP框架写的ajax无刷新分页

来源：互联网发布：excel2007筛选重复数据编辑：程序博客网时间：2024/05/22 08:08

html代码

<div class="container-fluid">

<div class="col-md-3 col-lg-3 col-sm-6 col-xs-12 item_box " id="item" style="display: none">
<div class="title">{$v.title}</div>
<div class="cont">
<p>{$v.content}</p>
<div class="bot">{$v.price}</div>
</div>
</div>

<div class="row itm_box clone" id="clone">
<foreach name="res" item="v">
<div class="col-md-3 col-lg-3 col-sm-6 col-xs-12 item_box">
<div class="title">{$v.title}</div>
<div class="cont">
<p>{$v.content}</p>
<div class="bot">{$v.price}</div>
</div>
</div>
</foreach>
</div>
<ul class="page">
<li class="prv">上一页</li>
<li class="next st">下一页</li>
</ul>
</div>

js代码

var page = 2;
function pagee(){
$.post("{:U('Home/index/ajax')}",{page:page},function(data){
if(data.code == 400){
// alert('没有了');
}else if(data.code == 200){
$('#clone .item_box').each(function(){

//遍历删除模块
$(this).remove();
})
for (var i = data.data.length - 1; i >= 0; i--) {

//遍历
var newDiv = $('#item').clone();//克隆
newDiv.show();//显示
newDiv.find('.title').html(data.data[i]['title']);//赋值
newDiv.find('.cont').find('p').html(data.data[i]['content']);
newDiv.find('.bot').html(data.data[i]['price']);
$('.clone').append(newDiv);//插入
}
page++;
}
})
}
$('.next').click(function(){

//点击下一页
pagee();

})
$('.prv').click(function(){

//点击上一页
page = page - 1;
if(page <= 2){
page = 2;
}
$.post("{:U('Home/index/ajaxprv')}",{page:page},function(data){
if(data.code == 400){
// alert('没有了');
}else if(data.code == 200){
$('#clone .item_box').each(function(){
$(this).remove();
})
for (var i = data.data.length - 1; i >= 0; i--) {
var newDiv = $('#item').clone();
newDiv.show();
newDiv.find('.title').html(data.data[i]['title']);
newDiv.find('.cont').find('p').html(data.data[i]['content']);
newDiv.find('.bot').html(data.data[i]['price']);
$('.clone').append(newDiv);
}
}
})
})
</script>

php代码

<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
public function index(){
$page = 0;
$res = M('yewu')->order('add_time desc')->limit($page,4)->select();
$this->assign('res',$res);
$this->display();
}
public function ajax(){
$po = ($_POST['page']-1)*4;
$res = M('yewu')->order('add_time desc')->limit($po,4)->select();
if($res){
$data['code'] = 200;
$data['data'] = $res;
}else{
$data['code'] = 400;
}
$this->ajaxReturn($data);
}
public function ajaxprv(){
$po = ($_POST['page']-2)*4;
$res = M('yewu')->order('add_time desc')->limit($po,4)->select();
if($res){
$data['code'] = 200;
$data['data'] = $res;
}else{
$data['code'] = 400;
}
$this->ajaxReturn($data);
}
}

0 0