Jquery+ajax+PHP 基于thinkPHP的无刷新分页

功能描述:以带着参数的形式加载Listinfo页面,形如:
http://无法访问的链接/index.php?g=Baoliao&m=Index&a=listinfo&id=1
或者是:
http://无法访问的链接/index.php?g=Baoliao&m=Index&a=listinfo&type=1
完成带条件的查询,输出相关数据到listinfo.html页面

总体思路:走控制器里get方法->html页面ajax请求->走控制器里面的ajax方法回传数据

PHP:
控制器函数分为2个部分

    if(IS_AJAX){
    //获取相关数据,完成查询,构造结果数组
    //具体在最后给出
    }
    else{
    //get方法请求页面,获取id or type 一些必要的值
    //并且把这些值隐藏到html页面中
    //加载页面
    }

html:

 <input id="area_id" type="hidden" value="<?=isset($area_id) ? $area_id:'0';?>">
        <input id="is_finish"     type="hidden" value="<?=isset($is_finish)? $is_finish : '-1';?>">
        <!--设置一些隐藏的input值,ajax提交到listinfo方法-->

    <div class="container">
        <div class="lists"><ul id="ul_lists" class="clearfix"></ul></div>
        <div class="page" id="page"><li></li></div>
    </div>
    <!--一个必要的ul 用来填充页面数据-->

js:



var page_cur = 1; //当前页
var total_num, page_size, page_total_num;//定义总记录数,每页条数,总页数
function getData(page) { //获取当前页数据
    var w = document.getElementById("is_finish"); //获取input值
    var x = document.getElementById("area_id");
    var is_finish = w.value;
    var area_id   = x.value;
    $.ajax({
        type: 'GET',
        url: '需要请求的页面',
        data: {'page': page - 1,'is_finish':is_finish,'area_id':area_id}, //需要传递的数据
        dataType: 'json',
        success: function(json) {
            $("#ul_lists").empty(); //清空
            total_num = json.total_num;//总记录数
            page_size = json.page_size;//每页数量
            page_cur = page;//当前页
            page_total_num = json.page_total_num;//总页数
            var li = "";
            var list = json.list;
            $.each(list, function(index, array) { //遍历返回json
            //根据json数据拼凑你要的<li> 
                li += "<li class='dd'>" +
                        "<span class='depart'>"
                        +array['area_id']+"  " +array['department_id']  +
                         "</span>" +

                      "</li>";
            });
            $("#ul_lists").append(li);

        },
        complete: function() {
            getPageBar();//js生成分页,可用程序代替

        },
        error: function() {
            alert("数据异常,请检查是否json格式");
        }
    });
}

function getPageBar() 
/*这里有点奇怪的就是注释的位置之前报错,换了换注释的位置,好了,我用的方法是查看源代码。注释在A位置,if条件里没内容,换到了B位置,好了*/
{ //js生成分页
    var page_str = '';
    if (page_cur > page_total_num)
    {
        page_cur = page_total_num;
    }//当前页大于最大页数
    if (page_total_num ==1 )
    {
        page_cur = 1;//当前页小于1
        page_str = "<span>共" + total_num + "条</span><span>" + page_cur + "/" + page_total_num + "</span>";
    }
    else{
        if (page_cur == 1) //若是第一页
        {
            page_str += "<span>首页&nbsp</span><span>上一页&nbsp</span>";
        }
        else
        {
            page_str += "<span><a href='javascript:void(0)' data-page='1'>首页&nbsp</a></span><span><a href='javascript:void(0)' data-page='" + (page_cur - 1) + "'>上一页</a></span>";
        }
        if (page_cur >= page_total_num) //若是最后页
        {
            page_str += "<span>下一页&nbsp</span><span>尾页&nbsp</span>";
        }
        else
        {
            page_str += "<span><a href='javascript:void(0)' data-page='" + (parseInt(page_cur) + 1) + "'>下一页</a></span><span><a href='javascript:void(0)' data-page='" + page_total_num + "'>尾页</a></span>";
        }
    }

    page_str += "共"+page_total_num+"页";
    $("#page").html(page_str);
}

$(function() {
    getData(1);//默认第一页
    $("#page a").live('click', function() { //live 向未来的元素添加事件处理器,不可用bind
        var page = $(this).attr("data-page");//获取当前页
        getData(page)
    });
});

PHP 里面的AJAX处理部分:

if(IS_AJAX){
//获取隐藏域的参数值构造$condition 查询条件 此处省略
$baoliao_model = M('baoliao'); //实例化模型
            $count    	   = $baoliao_model->where($condition)->count();
            $max_page 	   = ceil($count/$pagesize);      //计算得出分页数
            $page_num     = I('get.page',0,'intval')+1; //将传进来的页面值过滤

            if((empty($page_num)||($page_num<1)||($page_num>$max_page)))  $page_num = 1; //对传进来的页面值限定

            $baoliao_list = $baoliao_model->where($condition)->order("add_time DESC")->page($page_num.",$pagesize")->select();
            //开始构造结果数组
            $data = array(
                    "total_num" => $count,
                    "page_size" => $pagesize,
                    "page_total_num" => $max_page,
            );
            foreach($baoliao_list as $v)
            {
                $data['list'][] = array(
                        'title'=>$v['title'],
                        'verify_time'=>$v['verify_time'],
                );
            }
            //结果数组构造完毕 ,json格式输出
            echo json_encode($data);
}

PHP的非AJAX方法

if(IS_AJAX){}else{
$area_id = I('get.id',NULL,'intval');      //获取整形的id值,默认为空
            $info_type     = I('get.type',NULL,'intval');    //获取整形的type值,默认为空
            //对获取的值判断符合条件就输出到模板的hidden域
            $this->display();//加载页面
}
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值