ThinkPHP 整合Bootstrap Ajax分页

2018-06-22 05:06:00来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

ThinkPHP Ajax分页代码

 

  1. publicfunction index()
  2. {
  3. $where=array();
  4. $name = I('name');
  5. if(!empty($name)){
  6. $where['name']= array('like','%'.(string)$name.'%');
  7. }
  8. $Role=M('Role');
  9. $count= $Role->where($where)->count();// 查询满足要求的总记录数
  10. $Page =new \Think\AjaxPage($count,'ajax-page',10);// 实例化分页类 传入总记录数、ajax更新的局部页面ID和每页显示的记录数(10)
  11. $Page->lastSuffix=false;
  12. $Page->setConfig('first','首页');
  13. $Page->setConfig('last','末页');
  14. $Page->setConfig('header','<span class="rows btn btn-default margin-l-2">共 %TOTAL_ROW% 条</span>');//分页条数
  15. $Page->setConfig('theme','%FIRST% %UP_PAGE% %LINK_PAGE% %DOWN_PAGE% %END% %HEADER%');//分页样式:首页、末页等
  16. $show= $Page->show();// 分页显示输出
  17. // 进行分页数据查询 注意limit方法的参数要使用Page类的属性
  18. $datas = $Role->where($where)->order('id desc')->limit($Page->firstRow.','.$Page->listRows)->select();
  19. $this->assign('datas',$datas);// 赋值数据集
  20. $this->assign('page',$show);// 赋值分页输出
  21. if(IS_AJAX){
  22. $this->display('index_ajax');
  23. }else{
  24. $this->display();
  25. }
  26. }

ajax-page是模版中用于替换局部页面的ID

 

index_ajax是局部页面模版

扩展小部件ExtWidget

我是在Admin模块下建的这个类/Application/Admin/Widget/ExtWidget.class.php所有如下图

前台模版

我有个index.html模版,这个页面需要ajax分页,现在我建立一个index_ajax.html模版,如下图

index.html是有布局的模版,显示ajax分页地方的关键代码如下

 

  1. <table id="users"class="table table-bordered table-hover table-striped">
  2.     <thead>
  3.         <tr>
  4.             <th><input class="check-all" type="checkbox"/></th>
  5.             <th width="90%">名称</th>
  6.             <th width="10%">操作</th>
  7.         </tr>
  8.     </thead>
  9.     <tbody id="ajax-page">
  10.         {:W('Ext/renderPartial',array('data'=>array('partial'=>'Role/index_ajax','data'=>$datas,'page'=>$page)))}
  11.     </tbody>
  12. </table>

第一次页面加载的时候不是ajax渲染的页面,所以这里要调用一次index_ajax模版。当点击分页时ajax会替换掉这里的<tbody id="ajax-page"></tbody>内容

 

 

  1. {:W('Ext/renderPartial',array('data'=>array('partial'=>'Role/index_ajax','data'=>$datas,'page'=>$page)))}

 

index_ajax.html是没有布局的模版,只是为了显示数据。代码如下

 

  1. <notempty name="datas">
  2. <volist name="datas" id="vo">
  3. <tr>
  4. <td><input class="ids" type="checkbox" name="id[]" value="{$vo.id}"/></td>
  5. <td>{$vo.name}</td>
  6. <td>
  7. <span class="btn btn-xs btn-primary mySave" data-toggle="modal" data-id="{$vo.id}" data-url="{:U('/Admin/Role/update')}"><span class="glyphicon glyphicon-edit margin-r-2" aria-hidden="true"></span>修改</span>
  8. <a class="confirm ajax-get btn btn-xs btn-primary" href="{:U('/Admin/Role/del',array('id'=>$vo['id']))}"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>&nbsp;删除</a>
  9. </td>
  10. </tr>
  11. </volist>
  12. <else/>
  13. <tr><td colspan="100"class="text-center">没有查询到数据!</td><tr>
  14. </notempty>
  15. <notempty name="page">
  16. <tr><td colspan="100"class="text-right">{$page}</td><tr>
  17. </notempty>

 

js代码如下

 

  1. //ajax分页查询
  2. function ajax_show(id,url){
  3. //加载图片
  4. $('#ajax-loading-img').html('<img src="/Public/img/loading.gif" class="margin-r-2" alt="加载中...">');
  5. //ajax获取内容后并替换掉原有信息
  6. $.get(url,function(data){$("#"+id).html(data);});
  7. returnfalse;
  8. }

 

 

效果图

 

ThinkPHP Ajax分页带参数查询

 

 

html代码

 

  1. <form class="navbar-form" role="search" id="search-form" method="get" action="{:U('/Admin/Role/index')}">
  2. <div class="form-group">
  3. 名称:<input class="form-control" name="name" type="text">
  4. </div>
  5. <button type="submit"class="btn btn-primary" id="my-search"><span class="glyphicon glyphicon-glass margin-r-2" aria-hidden="true"></span>查询</button>
  6. </form>

js代码

 

 

  1. $(function(){
  2. $('#my-search').click(function(){
  3. var search_form=$("#search-form").serialize();//实例化查询参数
  4.                 var url="{:U('/Admin/Role/index')}"+'?'+search_form;//查询url
  5. return ajax_show('ajax-page',url);//调用ajax分页
  6. });
  7. });

 

效果图

可以看到分页的中已经有参数了,并且整个查询过程都是Ajax无刷新查询。


ThinkPHP 整合Bootstrap Ajax分页下载

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:详解一个自己原创的正则匹配IP的表达式

下一篇:php基础知识