文档章节

ThinkPHP+Ajax+Bootstrap+分页

明天就去装逼
 明天就去装逼
发布于 2017/04/23 09:58
字数 386
阅读 3
收藏 0

1、模板index.html部分:

<link rel="stylesheet" type="text/css" href="__PUBLIC__/css/bootstrap.min.css">

<div class="fruit" style="display: none;">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>水果id</th>
            <th>水果名字</th>
            <th>水果颜色</th> 
          </tr>
        </thead>
        <tbody class="tbody"></tbody>
      </table>                
      <ul class="pagination" id="page"></ul>
    </div>  
    <div class="tip" style="display:none">
       还没有数据哦
    </div>

2、jquery实现方法:

<script type="text/javascript" src="__PUBLIC__/js/jquery.min.js"></script>
 <script type="text/javascript" src="__PUBLIC__/js/bootstrap.min.js"></script>

<script>            
        var page_cur = 1; //当前页 
        var total_num, page_size, page_total_num;//总记录数,每页条数,总页数

        // 生成分页
        function pageArea(page_cur,page_total_num){
          var page_str='';
          if (page_cur>page_total_num){page_cur=page_total_num;}
          if (page_cur<1){ page_cur = 1;} //当前页小于1   
          var next="<li><a href='#' onclick='fruit("+(parseInt(page_cur)+1)+")'>下一页</a></li>";
          var pre="<li><a href='#' onclick='fruit("+(parseInt(page_cur)-1)+")'>上一页</a></li>";
          var first="<li><a href='#' onclick='fruit(1)'>首页</a></li>";
          var last="<li><a href='#' onclick='fruit("+page_total_num+")'>尾页</a></li>";
          if(page_cur==1){
              page_str+=next+last; 
            }else if(page_cur>= page_total_num){
              page_str+=first+pre;
            }else{
              page_str+=first+next+pre+last;
            }
            if(page_total_num==1){page_str='';} 
            return page_str;
        }
        //获取数据
        function fruit(page){
          page1=page-1;
          $.ajax({
              type:"POST",
              url: "__CONTROLLER__/fruit",
              data:'page='+page1,
              dataType: "JSON",
              success:function(json){
                      total_num = json.total_num; //总记录数 
                      page_size = json.page_size; //每页数量 
                      page_cur = page; //当前页 
                      page_total_num = json.page_total; //总页数 
                      var data = json.list; 
                      $(".tbody").empty();
                      if(data.length>0){
                          $(".fruit").show();
                        $(".tip").hide();
                        $.each(data,function(index,obj){
                         var str='<tr>'+                                
                                  '<td>'+obj.fid+'</td>'+
                                  '<td>'+obj.fname+'</td>'+
                                  '<td>'+obj.fcolor+'</td>'+
                                  '</tr>';
                          $(".tbody").append(str);
                        });            
                      }else{
                      $(".fruit").hide();
                      $(".tip").show();
                      }                     
                    },
              complete: function() {
                        var page_str=pageArea(page_cur,page_total_num);
                        $("#page").html(page_str);
                       }, 
                });
          }
      fruit(page_cur);

</script>

3、ThinkPHP控制器部分:

function fruit(){
        $page=I("page");
        $json['total_num']=M("Fruit")->count();
        $json['page_size']=5; //每页数量 
        $json['page_total']=ceil($json['total_num']/$json['page_size']); //总页数 
        $json['page_start']=$page *$json['page_size'];
        $json['list']=M("Fruit")->limit($json['page_start'],$json['page_size'])->select();
        $this->ajaxReturn($json);
    }

(参考http://www.sucaihuo.com/js/2.html写的)

© 著作权归作者所有

共有 人打赏支持
明天就去装逼
粉丝 0
博文 1
码字总数 386
作品 0
汕头
C# 插入、删除Excel分页符

概述 对Excel表格设置分页对我们预览、打印文档时是很方便的,特别是一些包含很多复杂数据的、不规则的表格,为保证打印时每一页的排版美观性或者数据的前后连接的完整性,此时的分页符就发挥...

E_iceblue
05/18
0
0
thinkphp简洁、美观、靠谱的分页类

废话不多说先上图预览下;即本博客的分页; 这个分页类是在thinkphp框架内置的分页类的基础上修改而来; 原分页类的一些设计,在实际运用中感觉不是很方便; 1:只有一页内容时不显示分页; ...

白俊遥
2016/03/06
14
0
laravel5自定义分页

laravel5分页处理与laravel4略有区别,laravel5提供了更方便的处理方式,可以方便满足不同分页展示。 laravel4自定义分页:http://php2012web.blog.51cto.com/5585213/1539601 laravel分页处...

ttlxihuan
2016/09/26
0
0
数据分页资料汇总

1.数据库分页Java实现(http://www.cnblogs.com/ITtangtang/archive/2012/04/21/2462385.html) 2.Java分页代码的实现(http://www.open-open.com/lib/view/open1346772322162.html) 3. java分页......

IT追寻者
2016/08/13
41
0
C# 如何处理Word文档分页——插入、删除、阻止分页

本篇文章将介绍C#编程如何来处理Word分页的方法。操作Word中的分页这里分为几种情况的来介绍: 插入分页 1.1在指定段落末尾插入分页 1.2 在指定字符后插入分页 删除分页 3.阻止表格分页 处理...

E_iceblue
06/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Django支持中文

django是支持中文界面, 先找到Django语言包安装目录,我的在: /usr/local/python3/lib/python3.6/site-packages/django/conf/locale 有zh-Hans和zh-Hant两个文件, 其中zh-Hans是简体中文,...

MichaelShu
18分钟前
1
0
迷宫问题:顺序栈解法

采用顺序栈以及回溯法,一个比较简单的问题,但是从来没有写过,也算是弥补一下自己欠数据结构的债吧,居然也花了一个半小时,无地自容了。。 定义好数据结构求解算法就显得容易一些了。 st...

LoSingSang
24分钟前
0
0
Zookeeper 概述及应用场景

一、概述 分布式协调技术,主要用来解决分布式环境当中多个进程之间的同步控制,让他们有序的去访问某种临界资源,防止造成"脏数据"的后果。 ZooKeeper是一个分布式的,开放源码的分布式应用...

PeakFang-BOK
32分钟前
0
0
(译)OpenGL ES2.0 – Iphone开发指引

教程截图: OpenGL ES 是可以在iphone上实现2D和3D图形编程的低级API。 如果你之前接触过 cocos2d,sparrow,corona,unity 这些框架,你会发现其实它们都是基于OpenGL上创建的。 多数程序员...

robslove
42分钟前
0
0
金九银十跳槽季,程序员面试点解析之Java专场

前言 近年来Java工程师这个岗位炙手可热,市场需求大,学习Java的人也越来越多,所以IT企业与求职者的选择都比较多,那么IT企业在面试时都会提哪些问题呢。下面为大家分享 Java高级工程师面试...

老道士
44分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部