文档章节

ThinkPHP+Ajax+Bootstrap+分页

明天就去装逼
 明天就去装逼
发布于 2017/04/23 09:58
字数 386
阅读 6
收藏 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
2018/05/18
0
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
2018/06/28
0
0
Mybatis关联结果查询分页方法

在Mybatis分页插件的说明中有如下内容 不支持的情况 对于关联结果查询,使用分页得不到正常的结果,因为只有把数据全部查询出来,才能得到最终的结果,对这个结果进行分页才有效。因而如果是...

Liuzh_533
2014/06/05
0
10
thinkphp简洁、美观、靠谱的分页类

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

白俊遥
2016/03/06
14
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊flink的Table API及SQL Programs

序 本文主要研究一下flink的Table API及SQL Programs 实例 // for batch programs use ExecutionEnvironment instead of StreamExecutionEnvironmentStreamExecutionEnvironment env = Stre......

go4it
22分钟前
0
0
mysqldump应用

备份单个库/表数据或库/表结构 命令行下具体用法如下: mysqldump -u用戶名 -p密码 -d 数据库名 表名 > 备份文件名 1、导出数据库为dbname的表结构(其中用戶名為root,密码为dbpasswd,生成的...

阿dai
30分钟前
0
0
shell脚本与Python的交互

1、Python针对shell获取传入,输出参数 传入:"$num" 例如: $0表示文件名,$1表示shell获取的第一个参数 输出:通过打印shell结果的方式,输出参数给Python。 例如: echo "{$iplist}",Python调...

一口今心
32分钟前
0
0
Euler 今日问世!国内首个工业级的图深度学习开源框架,阿里妈妈造

阿里妹导读:千呼万唤始出来!阿里妈妈正式公布重磅开源项目——图深度学习框架Euler。这是国内首个在核心业务大规模应用后开源的图深度学习框架。此次开源,Euler内置了大量的算法供用户直接...

阿里云官方博客
39分钟前
0
0
TiDB 3.0 Beta Release Notes

2019 年 1 月 19 日,TiDB 发布 3.0 Beta 版,对应 master branch 的 TiDB-Ansible。相比 2.1 版本,该版本对系统稳定性、优化器、统计信息以及执行引擎做了很多改进。 TiDB 新特性 支持 Vi...

TiDB
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部