ThinkPHP+Ajax+Bootstrap+分页
ThinkPHP+Ajax+Bootstrap+分页
明天就去装逼 发表于1年前
ThinkPHP+Ajax+Bootstrap+分页
  • 发表于 1年前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 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
×
明天就去装逼
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: