起风网主要需要用到 /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
<?phpnamespace 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(); } }
这样就可以完成分页了
评论前必须登录！
立即登录