Ajax无刷新分页

原理

因为分页需要显示页数，限制循环。所以需要先获取最大页数。当进入页面时就将查询到的页数和第一页默认显示的数据发送到前台。

然后当页数被点击的时候，再ajax发送到后台去查询，成功后则修改div内的内容。
1、后台初始页面

        //查询默认情况下的所有数据
        $count = getRecordNum('web_news',array());
        //每页显示的条数
        $num = 3;
        //获取到的条数除显示条数,得到页数,向上取整
        $pageNum = ceil($count/$num);
        return view('',array('pageNum'=>$pageNum,'banner'=>$banner));

2、前台显示页面

    var page = 1;
    $(document).ready(function(){
        //当加载完成后调用分页信息
        pageFun(page);
    });
    //分页函数
    function pageFun(page){
        var str = '';
        var html = '';
        //发送页数信息到后台
        $.post("{:url('/web/index/pageFun')}",{
            'page':page
        },function(data){
            for(var i=0;i<data['data'].length;i++){
                html += '<div class="col-md-12 col-sm-12"><a href=""> ' +
                        '<div class="informationlist1"><div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 zxpic">' +
                        '<img src="/Public/'+data['data'][i]['savePath']+'" class="img-responsive"></div>' +
                        '<div class="col-lg-8 col-md-8 col-sm-12 col-xs-12 zxword">' +
                        '<div class="featured-box"><div class="text"><h3>'+data['data'][i]['title']+'</h3>' +
                        '<p class="time">'+data['data'][i]['newstime']+'</p><p class="nr">'+data['data'][i]['desc']+'</p> </div></div></div></div></a></div>';
            }
            //插入到html代码中
            $('#info').html(html);
            //将分页数据循环定义到一个变量中
            str += '<a href="javascript:void(0)" id="prev" class="more"><<上一页 </a>';
            for(var i=1;i<=data['pageNum'];i++){
                str += '<a href="javascript:void(0)" id="pagelist" style="border:1px solid red;padding:5px;" value="'+i+'" class="num">'+i+'</a>';
            }
            str += '<a href="javascript:void(0)" id="next" class="more">下一页>></a>';
            $('#pagenum').html(str);
        });
    }
    //上一页
    $('#pagenum').on('click','#prev',function(){
        //当点击上一页时则减1传入函数中
        page -= 1;
        if(page<1){
            page = 1;
        }
        pageFun(page);
    });
    //下一页
    $("#pagenum").on("click","#next",function(){
        //点击下一页时则加1传入函数中
        page += 1;
        var zys = $('#zys').val();
        if(page>=zys){
            page = zys;
        }
        pageFun(page);
    });
    $("#pagenum").on("click","#pagelist",function(){
        //点击任意一页则获取他的页数传入函数中
        page = parseInt($(this).attr("value"));
        pageFun(page);

    })

3、分页的方法体

        $param = input('request.');
        //每页显示条数
        $num = 3;
        //计算从第多少条开始
        $tiao = ($param['page']-1)*$num;
        //关联查询图片和文章
        $join = [['sys_file b','a.poster=b.id','left']];
        $msg = getDataList('web_news',array(),'a.id,a.type,a.title,a.`desc`,a.detail,a.poster,
        a.sort,a.top,a.newstime,b.savePath,b.saveName','',$join,'',$num,$tiao);
        //未查到时
        if($msg['code']!=='1'){
            return array('code'=>'0','msg'=>'未查到数据');
        }
        //下面是计算分页页数
        //查询出的总数
        $count = getRecordNum('web_news',array());

        //用查出的条数除显示的条数向上取整得出页数
        $pageNum = ceil($count/$num);

        $msg['pageNum'] = $pageNum;
        return $msg;