文档章节

ThinkPHP+Ajax+Bootstrap+分页

明天就去装逼
 明天就去装逼
发布于 2017/04/23 09:58
字数 386
阅读 2
收藏 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
汕头
thinkphp简洁、美观、靠谱的分页类

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

白俊遥
2016/03/06
14
0
C# 插入、删除Excel分页符

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

E_iceblue
05/18
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
laravel5自定义分页

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

ttlxihuan
2016/09/26
0
0
C# 如何处理Word文档分页——插入、删除、阻止分页

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

E_iceblue
06/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
47分钟前
1
0
UML中 的各种符号含义

Class Notation A class notation consists of three parts: Class Name The name of the class appears in the first partition. Class Attributes Attributes are shown in the second par......

hutaishi
58分钟前
0
0
20180818 上课截图

小丑鱼00
今天
1
0
Springsecurity之SecurityContextHolderStrategy

注:下面分析的版本是spring-security-4.2.x,源码的github地址是: https://github.com/spring-projects/spring-security/tree/4.2.x 先上一张图: 图1 SecurityContextHolderStrategy的三个......

汉斯-冯-拉特
今天
0
0
LNMP架构(Nginx负载均衡、ssl原理、生成ssl密钥对、Nginx配置ssl)

Nginx负载均衡 网站的访问量越来越大,服务器的服务模式也得进行相应的升级,比如分离出数据库服务器、分离出图片作为单独服务,这些是简单的数据的负载均衡,将压力分散到不同的机器上。有时...

蛋黄_Yolks
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部