首页 > 代码库 > 用layer插件实现tp3.2的分页

用layer插件实现tp3.2的分页

2024-10-24 22:26:02   207人阅读

主要需要用到  /layer/layer.js  这个,

现在一个tp前端视图/article/index.html

 

<!DOCTYPE html>
<html lang="en">

<head>
    <title>{$sys[‘sys_name‘]}</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link href="__PUBLIC__/Admin/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="__PUBLIC__/Admin/css/font-awesome.min.css?v=4.1" rel="stylesheet">
    <link href="__PUBLIC__/Admin/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link href="__PUBLIC__/Admin/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="__PUBLIC__/Admin/css/plugins/colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">
    <link href="__PUBLIC__/Admin/css/plugins/cropper/cropper.min.css" rel="stylesheet">
    <link href="__PUBLIC__/Admin/css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="__PUBLIC__/Admin/css/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet">
    <link href="__PUBLIC__/Admin/css/plugins/nouslider/jquery.nouislider.css" rel="stylesheet">
    <link href="__PUBLIC__/Admin/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="__PUBLIC__/Admin/css/plugins/clockpicker/clockpicker.css" rel="stylesheet">
    <link href="__PUBLIC__/Admin/css/animate.min.css" rel="stylesheet">
    <link href="__PUBLIC__/Admin/css/style.min.css?v=4.0.0" rel="stylesheet">
    <link href="__PUBLIC__/Admin/css/uploadfile.css" rel="stylesheet">
    <script src="__PUBLIC__/Admin/js/jquery.min.js?v=2.1.4"></script>　　　　　//必须添加的js
    <script src="__PUBLIC__/Common/layer/layer.js"></script>　　　　　　　　　　//必须添加的js
    <script src="__PUBLIC__/Admin/js/jquery.form.js"></script>
</head>
<style>
    .pages a,.pages span {
        display:inline-block;
        padding:4px 7px;
        margin:0 2px;
        border:1px solid #D5D4D4;
        -webkit-border-radius:1px;
        -moz-border-radius:1px;
        border-radius:1px;
    }
    .pages a,.pages li {
        display:inline-block;
        list-style: none;
        text-decoration:none; color:#077ee3;
    }

    .pages a:hover{
        border-color:#077ee3;
    }
    .pages span.current{
        background:#077ee3;
        color:#FFF;
        font-weight:700;
        border-color:#077ee3;
    }

    .long-tr th{
        text-align: center
    }
    .long-td td{
        text-align: center
    }
    .long-td:hover{ background:#f5f5f5}
</style>

    <body class="gray-bg wrapper wrapper-content">



        <div class="hr-line-dashed"></div>
        
                    <form id="leftnav" name="leftnav" method="post" action="" >
                        <table class="table table-bordered">
                            <script id="arlist" type="text/html">
                                {{# for(var i=0;i<d.length;i++){  }}
                                <tr class="long-td">
                                      <td>{{d[i].a_id}}</td>
                                </tr>
                                {{# } }}
                            </script>
                            <tbody id="article_list"></tbody>
                        </table>
                        </form>

                    <div id="AjaxPage" style=" text-align: right;"></div>
                    <div id="allpage" style=" text-align: right;"></div>
                    </div>


        <script type="text/javascript" src="__PUBLIC__/Common/laytpl/laytpl.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Common/laypage/laypage.js"></script>

    <script type="text/javascript">
    //laypage分页
    function Ajaxpage(curr){

        $.post(‘{:U("Article/index")}‘, {
            page: curr || 1,
        }, function(data){
            if(data.list=null){
                $("#article_list").html(‘<center style="margin-top:300px;font-size:15px;">没有数据</center>‘);
            }else{
                article_list(data.info);
                laypage({
                    cont: $(‘#AjaxPage‘),//容器。值支持id名、原生dom对象，jquery对象,
                    pages:‘{$allpage}‘,//总页数
                    skip: true,//是否开启跳页
                    skin: ‘#1AB5B7‘,
                    curr: curr || 1,
                    groups: 4,//连续显示分页数
                    jump: function(obj, first){

                        if(!first){
                            Ajaxpage(obj.curr)
                        }
                        $(‘#allpage‘).html(‘第‘+ obj.curr +‘页，共‘+ obj.pages +‘页‘);
                    }
                });
            }
        });
    }
    Ajaxpage();

//接收异步获取的数据渲染到模板
function article_list(list){
    var tpl = document.getElementById(‘arlist‘).innerHTML;
    laytpl(tpl).render(list, function(html){
        document.getElementById(‘article_list‘).innerHTML = html;
    });
}

//状态



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

 

 

 

然后有一个相对应的控制器,ArticleController.class.php

<?php
namespace Otcms\Controller;
use Think\Controller;
use Common\Controller\AuthController;
use Think\Auth;
class ArticleController extends AuthController {
    
    public function index(){
        
        $Nowpage = I("page")?I("page"):1;

        $limits = 10;// 获取总条数
        $count = M(‘article‘)->count();//计算总页面
        $allpage = ceil($count / $limits);
        $allpage = intval($allpage);


        $lists = M(‘article‘)->page($Nowpage, $limits)->order(‘a_id desc‘)->select();

        $this->assign(‘Nowpage‘, $Nowpage);
        $this->assign(‘allpage‘, $allpage);
        if(I("page")){


            $this->success($lists);
        }


        
        $this->display();
    }
 

}

这样就可以完成分页了

用layer插件实现tp3.2的分页


联系
我们