laypage翻页基于tp实现有详细说明

浏览:558 发布日期:2017/03/16 分类:功能实现 关键字: laypage 翻页
laypage翻页基于tp实际有详细说明,搜索到的东西都不详细,对新手来说根本不能用来学习。所以我写了全功能的详细说明

Demo 文件传不上了,大家凑合看代码吧

laypage官方网站http://laypage.layui.com/class PppController extends ComController
{
    ///第一种
    public function index()
    {

        $pro=M('article')->field('title,aid')->select();
        $num=10;  //每页几条
        $result= json_encode($pro);
        $this->assign('result',$result);
        $this->assign('num',$num);
        $this->display('ppp/index'); // 输出模板

    }
    //第二种要laytpl模型js,本方式是在方法里控制页数
    public function index1()
    {
        $key = I('post.key', '', 'strip_tags');
        if(!$key==0){
            $data['title']  = array('like', '%'.$key.'%');
        }
        $count      = M('article')->where($data)->count();
        $num=10;  //每页几条
        $this->assign('count',$count);  //总条数
        $this->assign('key',$key);      //搜索的值
        $this->assign('num',$num);      //每页几条
        $this->display('ppp/index1');
    }
    public function indexjson1($page=1)
    {
        $num=10;  //每页几条
        $keyr = I('get.key', '', 'strip_tags');
        if(!$keyr==0){
            $data['title']  = array('like', '%'.$keyr.'%');
        }
        $pro=M('article')->field('aid,title')->where($data)->page($page,$num)->select();
        $this->ajaxReturn($pro);
    }

    //第三种
    public function index2()
    {
        $key = I('post.key', '', 'strip_tags');
        if(!$key==0){
            $data['title']  = array('like', '%'.$key.'%');
        }
        $count      = M('article')->where($data)->count();
        $num=10;
        $this->assign('count',$count);
        $this->assign('key',$key);
        $this->assign('num',$num);
        $this->display('ppp/index2');
    }
    public function indexjson2()
    {
        $keyr = I('get.key', '', 'strip_tags');
        if(!$keyr==0){
            $data['title']  = array('like', '%'.$keyr.'%');
        }
        $pro=M('article')->field('aid,title')->where($data)->select();
        $this->ajaxReturn($pro);
    }
    
}
模板1<ul id="biuuu_city_list"></ul>
<div id="biuuu_city"></div>

<script src="__PUBLIC__/home/laypage/laypage.js"></script>
<script>

    //测试数据
    var data = {$result};
    var nums = {$num}; //每页出现的数量
    var pages = Math.ceil(data.length/nums); //得到总页数


    var thisDate = function(curr){
        //此处只是演示,实际场景通常是返回已经当前页已经分组好的数据
        var str = '', last = curr*nums - 1;
        last = last >= data.length ? (data.length-1) : last;
        for(var i = (curr*nums - nums); i <= last; i++){
            str += '<li>'+ data[i]['title'] +''+ data[i]['aid'] +'</li>';
        }
        return str;
    };

    //调用分页
    laypage({
        cont: 'biuuu_city',
        pages: pages,
        skin: '#AF0000', //加载内置皮肤,也可以直接赋值16进制颜色值,如:#c00
        groups: 7, //连续显示分页数
        skip: true,
        jump: function(obj){
            document.getElementById('biuuu_city_list').innerHTML = thisDate(obj.curr);
        }
    })
</script>
模板2<script src="__PUBLIC__/home/laypage/jquery.min.js"></script>
<script src="__PUBLIC__/home/laypage/laytpl.js"></script>
<script src="__PUBLIC__/home/laypage/laypage.js"></script>


<!--搜索框开始-->

        <form name="admin_list_sea" class="form-search" method="post" action="{:U('Ppp/index1')}">
            <input type="text" id="key" class="form-control" name="key" value="{$key}" placeholder="输入需查询的文章名称" />
            <button type="submit">搜索</button>
        </form>

<!--搜索框结束-->

            <div class="example-wrap">
                <div class="example">
                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr class="long-tr">
                            <th width="3%">ID</th>
                            <th width="15%">标题</th>
                        </tr>
                        </thead>
                        <script id="list-template" type="text/html">
                            {{# for(var i=0;i<d.length;i++){  }}
                            <tr class="long-td">
                                <td>{{d[i].aid}}</td>
                                <td>{{d[i].title}}</td>
                            </tr>
                            {{# } }}
                        </script>
                        <tbody id="list-content"></tbody>
                    </table>
                    <div id="AjaxPage"></div>
                    <div>
                        <span id="allpage"></span>
                    </div>
                </div>
            </div>
<div class="spiner-example">加载中</div>
<script type="text/javascript">
    /**
     * [Ajaxpage laypage分页]
     * @param {[type]} curr [当前页]
     */
    Ajaxpage();

    function Ajaxpage(curr){
        var key=$('#key').val();
        $.getJSON('{:U('Ppp/indexjson1')}', {
            page: curr || 1,key:key
        }, function(data){      //data是后台返回过来的JSON数据
            $(".spiner-example").css('display','none'); //数据加载完关闭动画
            if(data==''){
                $("#list-content").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
            }else{
                var nums = {$num}; //每页出现的数量
                var pagesz = {$count};
                var pages = Math.ceil({$count}/nums);


                var tpl = document.getElementById('list-template').innerHTML;
                laytpl(tpl).render(data, function(html){
                    document.getElementById('list-content').innerHTML = html;
                });


                laypage({
                    cont: $('#AjaxPage'),//容器。值支持id名、原生dom对象,jquery对象,
                    pages: pages,//总页数
                    pagesz:pagesz,
                    skip: true,//是否开启跳页
                    skin: '#1AB5B7',//分页组件颜色
                    curr: curr || 1,
                    groups: 3,//连续显示分页数
                    jump: function(obj, first){
                        if(!first){
                            Ajaxpage(obj.curr)
                        }
                        $('#allpage').html('有'+ obj.pagesz +'条数据,第'+ obj.curr +'页,共'+ obj.pages +'页');
                    }
                });
            }
        });
    }
</script>
模板三<script src="__PUBLIC__/home/laypage/jquery.min.js"></script>
<script src="__PUBLIC__/home/laypage/laypage.js"></script>


<!--搜索框开始-->

        <form name="admin_list_sea" class="form-search" method="post" action="{:U('Ppp/index2')}">
            <input type="text" id="key" class="form-control" name="key" value="{$key}" placeholder="输入需查询的文章名称" />
            <button type="submit">搜索</button>
        </form>
        <ul id="biuuu_city_list"></ul>
<div id="AjaxPage"></div>
<div>
    <span id="allpage"></span>
</div>
<!--搜索框结束-->
<div class="spiner-example">加载中</div>
<script type="text/javascript">
    /**
     * [Ajaxpage laypage分页]
     * @param {[type]} curr [当前页]
     */
    Ajaxpage();

    function Ajaxpage(curr){
        var key=$('#key').val();
        $.getJSON('{:U('Ppp/indexjson2')}', {
            page: curr || 1,key:key
        }, function(data){      //data是后台返回过来的JSON数据
            $(".spiner-example").css('display','none'); //数据加载完关闭动画
            if(data==''){
                $("#list-content").html('<td colspan="20" style="padding-top:10px;padding-bottom:10px;font-size:16px;text-align:center">暂无数据</td>');
            }else{
                var nums = {$num}; //每页出现的数量
                var pagesz = {$count};
                var pages = Math.ceil({$count}/nums);


                var thisDate = function(curr){
                    //此处只是演示,实际场景通常是返回已经当前页已经分组好的数据
                    var str = '', last = curr*nums - 1;
                    last = last >= data.length ? (data.length-1) : last;
                    for(var i = (curr*nums - nums); i <= last; i++){
                        str += '<li>'+ data[i]['title'] +''+ data[i]['aid'] +'</li>';
                    }
                    return str;
                };


                laypage({
                    cont: $('#AjaxPage'),//容器。值支持id名、原生dom对象,jquery对象,
                    pages: pages,//总页数
                    pagesz:pagesz,
                    skip: true,//是否开启跳页
                    skin: '#1AB5B7',//分页组件颜色
                    curr: curr || 1,
                    groups: 3,//连续显示分页数
                    jump: function(obj, first){
                        if(!first){
                            Ajaxpage(obj.curr)
                        }
                        $('#allpage').html('有'+ obj.pagesz +'条数据,第'+ obj.curr +'页,共'+ obj.pages +'页');
                        document.getElementById('biuuu_city_list').innerHTML = thisDate(obj.curr);
                    }
                });
            }
        });
    }
</script>
以上三个demo,ajax无刷新+带搜索功能,适合新手学习,本人写的有点乱,再想说一句各大神发教程时能不能再详细点呢能不能上DEMO呢

附件 laypageDEMO.rar ( 37.37 KB 下载:26 次 )

评论( 相关
后面还有条评论,点击查看>>