用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两种方式. 在使用的过程中一 ...

随机推荐

php生成二维码的几种方式[转]
二维码是二维条形码的一种,可以将网址.文字.照片等信息通过相应的编码算法编译成为一个方块形条码图案,手机用户可以通过摄像头和解码软件将相关信息重新解码并查看内容.PHP可以使用php QR Cod ...
Python——os（一）进程参数
python的os模块提供了一种使用操作系统相关函数的通用手段,如果只是想读或写文件请移步 open(),向操作路径请查阅 os.path 模块,如果想要读取命令行中所有文件里的所有行请查阅 file ...
Winform控件学习笔记【第三天】——ListBox
1. 属性事件列表: SelectionMode 组件中条目的选择类型,即多选(Multiple).单选(Single) Rows 列表框中显示总共多少行 Selecte ...
【转】Asp.net MVC 通过自定义ControllerFactory实现构造器注入（重写DefaultControllerFactory）
[转]Asp.net MVC 通过自定义ControllerFactory实现构造器注入一.重写ControllerFactory的GetControllerInstance ControllerF ...
【Access-Control-Allow-Origin】跨域问题
[前言] 在实际项目中,可能是多个项目共同完成某个功能,他们之间需要实现数据的交互.这样就会需要有跨域的问题. 比如,发布在不同电脑上的不同项目之间,用不同语言开发的项目之间…… [JSONP] 当使 ...
vue form表单绑定事件与方法
使用v-on绑定事件 <button @click="hello">Hello</button><br /> <button @click ...
配置IP
配置目的:配置IP为静态,让IP地址不变,方便长时间连接. 几个命令: dhclient 自动获取IP; 杀死进程:dhclient -r ip addr 显示网卡情况,了解到IP地址: 编辑配置文件 ...
调用 COM 对象
调用 COM 对象大多数 Windows 程序猿都熟悉组件对象模型(Component Object Model,COM).在某程度上..NET 框架就是为了替换 COM,可是.系统仍然保留了这个 ...
【Linux】理解分区
http://blog.csdn.net/aaronychen/article/details/2270048 主分区逻辑分区设置 http://forum.ubuntu.org.cn/viewtop ...
smartgit 需要输入序列号解决办法
找到路径: %APPDATA%\syntevo\SmartGit\<main-smartgit-version> 然后删除: settings.xml 再重新打开smartgit 就可以了

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

用layer插件实现tp3.2的分页的更多相关文章

随机推荐

热门专题