基于TP的Ajax下拉无刷新分页适用app

最新推荐文章于 2021-08-04 16:43:32 发布

Anwous

最新推荐文章于 2021-08-04 16:43:32 发布

阅读量783

点赞数

分类专栏： AJAX HTML PHP ThinkPHP

ThinkPHP 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

HTML

10 篇文章 0 订阅

订阅专栏

PHP

7 篇文章 0 订阅

订阅专栏

Controller

//前台展示
	public function test() {
	//查询资讯详细信息 将默认查询数量传入
        $areInfo = $this->searchInfo(0,100);
        $this->assign('res', $areInfo);
        $this->display();
	}

	//接收前台请求 设置查询条件
	public function loadpage(){
        if (IS_AJAX && IS_POST){
            $page = I('post.page') ? I('post.page') : false;
            if ($page){
                $pageSize = 6;
                $startPage = ($page - 1) * $pageSize + $pageSize;
                $artInfo = $this->searchInfo($startPage, $pageSize);

                return $this->showMsg(1,'获取数据成功',$artInfo);
            } else{
                return $this->showMsg(0, '请重新刷新!');
            }
        }
    }

    /**
     * 查询资讯分页 默认加载10条
     * @param int $startPage 开始位置
     * @param int $pageSize 显示条数
     * @return mixed
     */
    public function searchInfo($startPage = 0, $pageSize = 10){
            $areInfo = M('t_area')
                ->order('id desc')
                ->limit($startPage, $pageSize)
                ->select();
        return $areInfo;
    }

    //将所需数据返回给前台
    public function showMsg($status , $msg , $data=array()) {
    	$res = array(
    		'status' => $status,
    		'msg'=> $msg,
    		'data'=>$data
    		);

    	$this->ajaxReturn($res);
    }

前台部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>示例</title>
</head>
<body>
	<table class="restable">
		<foreach name='res' item='v'>
		<tr>
			<td>{$v.id}</td>
			<td>{$v.parentid}</td>
			<td>{$v.name}</td>
		</tr>
		</foreach>
	</table>
</body>
<script type="text/javascript" src="__PUBLIC__/lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="__PUBLIC__/lib/layer/2.4/layer.js"></script>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="__PUBLIC__/lib/datatables/1.10.0/jquery.dataTables.min.js"></script> 
<script type="text/javascript" src="__PUBLIC__/lib/laypage/1.2/laypage.js"></script>
<script>
	 //动态加载页面
    var page = 0;//分页页码
    $(window).bind('scroll', function () {//监控滚动条 到最底部时请求数据
        if ($(document).scrollTop() == $(document).height() - $(window).height()) {
            page++;
            ajaxRead();
        }
    });

    //请求数据
    function ajaxRead() {
        var html = "";
        var url = "{:U('index/loadpage')}";
        var data = {'page': page};
        var index;
        $.ajax({
            type: 'post',
            dataType: 'json',
            url: url,
            data: data,
            beforeSend: function () {
                //loading层
                index = layer.load(1, {
                    shade: [0.1, '#fff'], //0.1透明度的白色背景
                    time:500
                });
            },
            success: function (data) {
                layer.close(index);
                if (data.data.length == 0) {
                    layer.msg('已经到底!',{time:500});
                } else if (data.status == 0) {
                    layer.msg(data.message,{time:500});
                } else {
                    $.each(data.data, function (i, item) {
                    	//遍历传来的数据 拼接html
                        html += '<tr><td>'+item.id+'</td>';
                        html += '<td>'+item.parentid+'</td>';
                        html +=	'<td>'+item.name+'</td></tr>';

                    });
                    $(".restable").append($(html));//写入页面
                }
            },
        });
    }
</script>
</html>

Anwous

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
基于TP的Ajax下拉无刷新分页适用app

Controller//前台展示 public function test() { //查询资讯详细信息将默认查询数量传入 $areInfo = $this-&gt;searchInfo(0,100); $this-&gt;assign('res', $areInfo); $this-&gt;display(); } //接收前台请求设...
复制链接

扫一扫