jquery+TP框架实现ajax分页

html代码如下:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>列表</title>
</head>
<body>
<table>
    <tr>
        <th>ID</th>
        <th>账号</th>
        <th>密码</th>
        <th>手机</th>
        <th>邮箱</th>
        <th>地址</th>
    </tr>
    <foreach name="data.data" item="v">
    <tr id="t">
        <td>{$v.id}</td>
        <td>{$v.user_name}</td>
        <td>{$v.user_pwd}</td>
        <td>{$v.user_phone}</td>
        <td>{$v.user_email}</td>
        <td>{$v.user_home}</td>
    </tr>
    </foreach>
</table>

<!--<a href="javascript:void(0)" onclick="page({$data.home_page})">首页</a>-->
<!--<a href="javascript:void(0)" onclick="page('prev')">上一页</a>-->
<!--<a href="javascript:void(0)" onclick="page('next')">下一页</a>-->
<!--<a href="javascript:void(0)"  onclick="page({$data.last_page})">尾页</a>-->
当前第{$data.current_page}页/共{$data.last_page}页
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:void(0)" onclick="page({$data.home_page})">首页</a>
<a href="javascript:void(0)" onclick="page({$data.pre_page})">上一页</a>
<a href="javascript:void(0)" onclick="page({$data.next_page})">下一页</a>
<a href="javascript:void(0)"  onclick="page({$data.last_page})">尾页</a>


<!--<input type="hidden" id="pa" value="{$data.current_page}">-->
<script src="__PUBLIC__/js/jquery-3.3.1.min.js"></script>
<script>
    function page(obj) {
        // var page = $("#pa").val();
        //     if(obj == 1){
        //         page  =1;
        //     }else if(obj=='prev'){
        //         page = page-1<1?1:page-1;
        //     }else if(obj=='next'){
        //         page=parseInt(page)+1;
        //     }else{
        //         page=obj;
        //     }
        $.get("__URL__/index?page="+obj,
            function(data,status){
                //console.log("数据: \n" + data + "\n状态: " + status);
                $("body").html(data);
            });

    }
</script>
</body>
</html>

php代码如下:

<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
    public function index(){
        //获取当前页
        $current_page = empty($_GET['page'])?1:$_GET['page'];
        //求出总条数
        $count = M('user')->count();
        //设置每页显示的条数
        $length = 3;
        //求出总共多少页
        $last_count = ceil($count/$length);
        //求出偏移量
        $limit = ($current_page-1)*$length;
        //sql查询
        $data = M('user')->limit($limit,$length)->select();

        //判断首页、尾页、上一页、下一页
        $home_page = 1; //首页
        $last_page = $last_count;//尾页
        //上一页
        if($current_page<=1){
            $pre_page = 1;
        }else{
            $pre_page = $current_page-1;
        }

        //下一页
        if($current_page>=$last_count){
            $next_page = $last_count;
        }else{
            $next_page = $current_page+1;
        }

        //返回
        $data2['data'] = $data;  //表单数据
        $data2['current_page'] = $current_page;  //当前页
        $data2['home_page'] = $home_page; //首页
        $data2['last_page'] = $last_page;  //尾页
        $data2['pre_page'] = $pre_page;  //上一页
        $data2['next_page'] = $next_page;  //下一页

        $this->assign('data',$data2);
        $this->display();
    }










    public function GetPage(){
        //获取当前页
        $current_page = empty($_GET['page'])?1:$_GET['page'];
        //求出总条数
        $count = M('user')->count();
        //设置每页显示的条数
        $length = 3;
        //求出总共多少页
        $last_count = ceil($count/$length);
        //求出偏移量
        $limit = ($current_page-1)*$length;
        //sql查询
        $data = M('user')->limit($limit,$length)->select();

        //判断首页、尾页、上一页、下一页
        $home_page = 1; //首页
        $last_page = $last_count;//尾页
        //上一页
        if($current_page<=1){
            $pre_page = 1;
        }else{
            $pre_page = $current_page-1;
        }

        //下一页
        if($current_page>=$last_count){
            $next_page = $last_count;
        }else{
            $next_page = $current_page+1;
        }

        //返回
        $data2['data'] = $data;  //表单数据
        $data2['current_page'] = $current_page;  //当前页
        $data2['home_page'] = $home_page; //首页
        $data2['last_page'] = $last_page;  //尾页
        $data2['pre_page'] = $pre_page;  //上一页
        $data2['next_page'] = $next_page;  //下一页

        $this->ajaxReturn($data2,'json');


    }
}

猜你喜欢

转载自www.cnblogs.com/hopelooking/p/9087019.html