用layer插件实现tp3.2的分页
主要需要用到 /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的分页的更多相关文章
- layer插件layer.photos()动态插入的图片无法正常显示
layer插件layer.photos()动态插入的图片无法正常显示,点击后面插入的图片,显示的是之前的图片列表,再次点击又是正常 有朋友遇到同样的问题 http://fly.layui.com/ji ...
- layer插件学习——弹框（自定义页）
本文是自己整理的关于layer插件的弹框样式结果 介绍: 官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护.不断建设和提升社区服务,使得猿们纷纷自 ...
- layer插件学习——提示层
本文是自己整理的关于layer插件的提示层的结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuery插 ...
- layer插件学习——询问框
本文是自己整理的关于layer插件的询问框样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuery ...
- layer插件学习——icon样式
本文是自己整理的关于layer插件的icon样式结果 一.准备工作 下载jQuery插件和layer插件,并引入插件(注意:jQuery插件必须在layer插件之前引用) 百度云资源链接: jQuer ...
- 用jQuery Validate+layer插件实现好看的表单提交效果
作为初学者,以前做表单验证都是自己写的,目的是让自己更好的了解代码,加深自己对javascript的理解,但是其实在很久都知道有一个很好用的表单验证插件:jQuery Validate.js,一直都没 ...
- layer插件open方法回掉值问题
最近做项目需用到一个弹出层加载iframe页面的东西,首先想到layer插件,此插件用到过多次,兼容性很好,功能也强大,废话不多说上代码. 其实功能很简单,就是在目标页面选择一个值,回掉回来,说明一下 ...
- 弹出框layer插件
有时候我们在网页制作中需要引用各种弹出框,弹出框的展现形式多种多样.可以是弹出图片,视频,文字,也可以是弹出图片轮播等形式: 弹出框插件——layer使用方法(其实官方文档中已经介绍的很详细): 下载 ...
- 【spring boot】14.spring boot集成mybatis,注解方式OR映射文件方式AND pagehelper分页插件【Mybatis】pagehelper分页插件分页查询无效解决方法
spring boot集成mybatis,集成使用mybatis拖沓了好久,今天终于可以补起来了. 本篇源码中,同时使用了Spring data JPA 和 Mybatis两种方式. 在使用的过程中一 ...
随机推荐
- Spring系列(二)：Spring IoC/DI的理解
这几天重新学习了一下Spring,在网上找了相关的ppt来看,当看到Spring IoC这一章节的时候,先大致浏览了一下内容,有将近50页的内容,内心窃喜~QAQ~,看完这些内容能够对IoC有更深层次 ...
- tpshop模板
TPshop模板在根目录 的 Template 下面 要修改某个模块下面的模板路径 修改 对应模块下面的Conf/html.php 文件的 <?php return array( 'HTML_C ...
- .NET WebAPI 正确抛出错误详细信息
try { ... } catch (Exception e) { //在webapi中要想抛出异常必须这样抛出,否则之抛出一个默认500的异常 var resp = new HttpResponse ...
- 正则split
string content = "第1行导入失败,失败原因为: <加班原因>字段必填"; string[] resultString = Regex.Split(co ...
- MATLAB错误：下标索引必须是正整数类型或者逻辑类型
背景: Matlab R2015b 问题: 在运行BP算法时出现错误: 下标索引必须是正整数类型或者逻辑类型 output( i , class( i ) ) = 1 ; 解决办法: 根目录下运行, ...
- OpenGL 遮挡查询
原文地址:http://www.linuxidc.com/Linux/2015-02/114036.htm 在一个场景中,如果有有些物体被其他物体遮住了不可见.那么我们就不需要绘制它.在复杂的场景中, ...
- SharePoint 2013 隐藏左边快速启动菜单栏(Hiding the Quick Launch Bar)
在SharePoint 2013默认网站页面中,很多时候,我们需要隐藏左边快速启动菜单栏,这时我们可以通过下面的样式来实现隐藏它. 和SharePoint 2010不太一样,方法改了,不过性质是一样的 ...
- Oracle-10.2.0.1，打补丁10.2.0.5：在 debian 版本4【不含4】以上，及 ubuntu 7.04【不含7.04】以上都可以安装！
如题. todo 特殊的:ubuntu 16.04 LTS 版本 无法安装成功,原因待查找!!! 最近测试练习安装linux x64上的 oracle10.2.0.5, 都要吐了.
- flume使用之exec source收集各端数据汇总到另外一台服务器
转载:http://blog.csdn.net/liuxiao723846/article/details/78133375 一.场景一描述: 线上api接口服务通过log4j往本地磁盘上打印日志,在 ...
- [原]巧用RenderTexture
郑重声明:转载请注明出处 U_探索 本文诞生于面试过程中这道题:NGUI如何制作3D角色的显示.(大概是这样) 呵呵 没事出去面试面试,考核考核自己也是一种不错的方式哦!不过现在u3d面试,貌似比以 ...