thinkPHP3.2.3结合Laypage实现的分页功能示例

本文实例讲述了thinkPHP3.2.3结合Laypage实现的分页功能。分享给大家供大家参考,具体如下:

控制器

<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
  /**
  *@brief 查询
  ****/
  public function index(){
  $choose = I('choose','-6');
  $c['easy_hard'] = $choose;
    $type=I('typeid','');
    $nowpage=I('page',1);
    if($type == '')
    {
      if($choose == -6)
      {
        $totalpage=ceil((D('data')->count())/10);
        $infos=D('data')->limit(($nowpage-1)*10,10)->select();
      }else{
        $totalpage=ceil((D('data')->where($c)->count())/10);
        $infos=D('data')->where($c)->limit(($nowpage-1)*10,10)->select();
      }
    }else{
      if($choose == -6)
      {
        $map['data'] = array('like',"%$type%");
        $totalpage=ceil((D('data')->where($map)->count())/10);
        $infos=D('data')->where($map)->limit(($nowpage-1)*10,10)->select();
      }else{
        $map['data'] = array('like',"%$type%");
        $totalpage=ceil((D('data')->where($map)->where($c)->count())/10);
        $infos=D('data')->where($map)->where($c)->limit(($nowpage-1)*10,10)->select();
      }
    }
  $this->assign('type',$type);
    $this->assign('choose',$choose);
    $this->assign("totalpage",$totalpage);
    $this->assign("infos",$infos);
    $this -> display();
  }
}

视图层

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Think Demo</title>
  <script type="text/javascript" src="__PUBLIC__/jquery-1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="__PUBLIC__/jquery-1.11.1/jquery.js"></script>
  <script type="text/javascript" src="__PUBLIC__/layer/layer.js"></script>
  <script type="text/javascript" src="__PUBLIC__/laypage/laypage.js"></script>
</head>
<body>
<div>
 <select name="" id="slc1" onchange="return choose()">
  <option value="-6" <if condition="$choose eq -6 "> selected </if> >全部</option>
  <option value="0" <if condition="$choose eq 0 "> selected </if> >简单</option>
  <option value="1" <if condition="$choose eq 1 "> selected </if> >一般</option>
 </select>
  <input type="text" value="<if condition="$type neq '' "> {$type} </if>" id="type"><button id="sou">搜索</button>
</div>
<br>
  <table border="1" width="500" height="150" >
        <tr>
          <th>ID</th>
          <th>语言</th>
          <th>难易程度</th>
          <th>操作</th>
        </tr>
        <volist name="infos" id="vo">
        <tr>
          <th>{$vo.id}</th>
          <th>{$vo.data}</th>
          <th>
            <if condition="$vo.easy_hard eq '0'">简单
            <else />一般
            </if>
          </th>
          <th>
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="return del({$vo.id});">删除</a>
            <a href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="return edit({$vo.id});">修改</a>
          </th>
        </tr>
        </volist>
  </table>
  <div style="margin-top:15px; text-align:center;" id="page11"></div>
  <button onclick="return add_()"> 添加 </button> <br />
<script type="text/javascript">
  function choose()
  {
    var type=$("#type").val();
    var checkValue=$("#slc1").val();
    window.location.href="?typeid=" rel="external nofollow" rel="external nofollow" +type+"&choose="+checkValue;
  }
  $("#sou").bind("click",function(event){
    var type=$("#type").val();//获取假设的搜索条件值
    var checkValue=$("#slc1").val();
    window.location.href="?typeid=" rel="external nofollow" rel="external nofollow" +type+'&choose='+checkValue;
  });
  $(function(){
      laypage({
        cont: 'page11',
        pages: {$totalpage}, //假设我们获取到的是18(后端计算完总页数后将总页数值传过来,放在这里即可(类似{$totalpage})).
       curr: function(){ //通过url获取当前页,也可以同上(pages)方式获取
         var page = location.search.match(/page=(\d+)/);
            return page ? page[1] : 1;//如果没有页数显示时,默认是第一页
          }(),
          jump: function(e, first){ //触发分页后的回调
            if(!first){ //一定要加此判断,否则初始时会无限刷新
              location.href=setParam("page",e.curr);
            }
          }
      });
  });
  function setParam(param,value){
    var query = location.search.substring(1);
    var p = new RegExp("(^|)" + param + "=([^&]*)(|$)");
    if(p.test(query)){
      //query = query.replace(p,"$1="+value);
      var firstParam=query.split(param)[0];
      var secondParam=query.split(param)[1];
      if(secondParam.indexOf("&")>-1){
        var lastPraam=secondParam.split("&")[1];
        return '?'+firstParam+'&'+param+'='+value+'&'+lastPraam;
      }else{
        if(firstParam){
          return '?'+firstParam+''+param+'='+value;
        }else{
          return '?'+param+'='+value;
        }
      }
    }else{
      if(query == ''){
        return '?'+param+'='+value;
      }else{
        return '?'+query+'&'+param+'='+value;
      }
    }
  }
</script>
</body>
</html>

更多关于thinkPHP相关内容感兴趣的读者可查看本站专题:《ThinkPHP入门教程》、《thinkPHP模板操作技巧总结》、《ThinkPHP常用方法总结》、《codeigniter入门教程》、《CI(CodeIgniter)框架进阶教程》、《Zend FrameWork框架入门教程》及《PHP模板技术总结》。

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。

(0)

相关推荐

  • thinkPHP5使用laypage分页插件实现列表分页功能

    一.背景 在使用thinkPHP框架做项目的时候,经常会遇到对列表的内容进行分页.thinkPHP框架中自带了分页功能,但是有缺陷.这个缺陷是每次返回每页数据给页面时需要重新加载页面所需要的JS.CSS等资源.如果页面包含的JS过多.过大,会增加流量压力.因此,我们使用laypage插件.每次使用ajax请求获取每页的数据就可以了,不需要重复加载页面. 二.分页流程 如下图所示: 流程说明: 1) 调研App.php中的函数,该函数调用fetch函数.fetch函数渲染list.html.   

  • laypage前端分页插件实现ajax异步分页

    本文实例为大家分享了laypage前端分页插件,ajax异步分页,获取json数据实现无刷新分页,供大家参考,具体内容如下 function GetList(pageIndex) { var _this = "" var clone_this = ""; _this = $(".BindDataList");//数据列表容器, clone_this = _this.clone(true); var pageSize = 25;//每页展示的条数

  • laypage+SpringMVC实现后端分页

    项目中用到了模板引擎thymeleaf和前端框架layUI,算是一路摸索.一个坑一个坑踩过来的.之前边学习边做项目的时候没有记录下学习的过程和遇到问题的解决思路和方法,着实有点可惜.所以从现在开始咯. laypage分页 下面就以laypage的两种分页展开行文的思路:异步刷新分页和整页刷新式跳转.具体可参看官方文档. 异步刷新分页 首先使用laypage之前,先加载laypage模块.使用 layui.use('laypage')加载即可. 1.前端html代码如下: <div id="

  • laypage.js分页插件使用方法详解

    本文实例为大家分享了laypage.js分页插件的使用方法,供大家参考,具体内容如下 1.引用依赖 a.layui.js b.layui.css c.laypage.js 2.HTML代码部分 <div id="page-nav" style="float: right"></div> 3.js代码部分 <script> $(function(){ //加载菜单列表数据 menuPageData(); }); function m

  • js多功能分页组件layPage使用方法详解

    本文的主要目的就是为大家分享layPage 多功能的js分页组件具体操作方法,供大家参考,具体内容如下 php 部分 function index(){ header('Content-Type:text/html;charset=utf-8'); // 获取当前页码,默认第一页,设置每页默认显示条数 $nowpage = I('get.page', 1, 'intval'); $limits = 8; // 获取总条数 $count = M('Article') -> where(array(

  • 基于layPage插件实现两种分页方式浅析

    最近在开发过程中经常用到分页,今天挤出些时间来捋一捋自己的经验 在web开发中,一般显示数据列表页时,我们会用到分页控件来显示数据.采用分页一般基于两种不同的需求,一种是数据量不算很大,但是在页面展示又显得过长,看起来很不舒服.一种则是因为数据量太过于庞大,无法一次性去数据库将数据读取出来,于是采用分页的形式去将数据分页显示出来. 前者即所谓的前端分页,而后者就是服务端分页. 两者的区别在于:前端分页是将所有数据取出,为方便用户查看,合理展示数据.在前端js上对数据进行分页.而服务端分页是根据当

  • 基于LayUI分页和LayUI laypage分页的使用示例

    本文介绍了LayUI分页,LayUI动态分页,LayUI laypage分页,LayUI laypage刷新当前页,分享给大家,具体如下: 效果图:  一.引用js依赖 主要是jquery-1.11.3.min.js 和 layui.all.js , json2.js用来做json对象转换的 <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.3.m

  • layui2.0使用table+laypage实现真分页

    前言:最近项目上使用layui做前端页面,发现layui的table本身的分页不能根据屏幕生成每页行数,所以研究了下文档,更改分页 简单解释: 1.最开始是根据屏幕计算加载的每页行数 2.framework可以糊了,由于是老项目还使用了sea.js 3.getUrlParam()是用于其他页面带参数跳转的也可以忽略 function getUrlParam(name) { var reg = new RegExp("(^|&)" + name + "=([^&

  • VUEJS实战之利用laypage插件实现分页(3)

    前言 在上两章的工作中,我们顺利的实现了首页的渲染,但是,只是渲染了一页数据而已.我们可能需要渲染更多的数据,这时候,我们就有必要考虑分页了. 分页有很多种方式,比如异步加载的分页方式.然而对于没有太多使用前端模版框架的朋友来说,一上来就使用这种方式,可能稍微有点难度.因此,我们这章的分页实现,是基于普通的链接分页的方式完成的. 在我们有了更多的前端框架的使用经验之后,我们可以使用更加丰富的分页方法. 事实上,我们自己构建一个分页组件也不是不可以,在移动端我都是自己的代码实现的.但是,我这里要推

  • laypage分页控件使用实例详解

    在开发的时候经常遇到分页比较麻烦,尤其对于一个后端程序猿来说,但是这个问题不能不解决,于是找了一个分页的控件用用,记录在下,以便以后使用. 以下是官网中使用的简单例子: //以下将以jquery.ajax为例,演示一个异步分页 $.getJSON('test/demo1.json', {curr: 6}, function(res){ //从第6页开始请求.返回的json格式可以任意定义 laypage({ cont: 'page1', //容器.值支持id名.原生dom对象,jquery对象.

随机推荐