ThinkPHP 整合Bootstrap Ajax分页样式

ThinkPHP  /  管理员 发布于 8年前   174

ThinkPHP Ajax分页代码

publicfunction index(){$where=array();$name = I('name');if(!empty($name)){$where['name']= array('like','%'.(string)$name.'%');}$Role=M('Role');$count= $Role->where($where)->count();// 查询满足要求的总记录数$Page =new \Think\AjaxPage($count,'ajax-page',10);// 实例化分页类 传入总记录数、ajax更新的局部页面ID和每页显示的记录数(10)$Page->lastSuffix=false;$Page->setConfig('first','首页');$Page->setConfig('last','末页');$Page->setConfig('header','共 %TOTAL_ROW% 条');//分页条数$Page->setConfig('theme','%FIRST% %UP_PAGE% %LINK_PAGE% %DOWN_PAGE% %END% %HEADER%');//分页样式：首页、末页等$show= $Page->show();// 分页显示输出// 进行分页数据查询 注意limit方法的参数要使用Page类的属性$datas = $Role->where($where)->order('id desc')->limit($Page->firstRow.','.$Page->listRows)->select();$this->assign('datas',$datas);// 赋值数据集$this->assign('page',$show);// 赋值分页输出if(IS_AJAX){$this->display('index_ajax');}else{$this->display();}}

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

index_ajax是局部页面模版

扩展小部件ExtWidget

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

前台模版

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

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

 {:W('Ext/renderPartial',array('data'=>array('partial'=>'Role/index_ajax','data'=>$datas,'page'=>$page)))} 
 
 
  
  
名称
  
操作
 
 
 

第一次页面加载的时候不是ajax渲染的页面，所以这里要调用一次index_ajax模版。当点击分页时ajax会替换掉这里的内容

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

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

 {$vo.name}修改$vo['id']))}"> 删除没有查询到数据！{$page}

js代码如下

//ajax分页查询function ajax_show(id,url){//加载图片$('#ajax-loading-img').html('');//ajax获取内容后并替换掉原有信息$.get(url,function(data){$("#"+id).html(data);});returnfalse;}

效果图

ThinkPHP Ajax分页带参数查询

html代码

名称：查询

js代码

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

效果图

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

以上所述是小编给大家介绍的ThinkPHP 整合Bootstrap Ajax分页样式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！

您可能感兴趣的文章:

• ThinkPHP5 通过ajax插入图片并实时显示(完整代码)
• Thinkphp5框架ajax接口实现方法分析
• TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
• thinkPHP5框架实现基于ajax的分页功能示例
• thinkPHP5 ajax提交表单操作实例分析
• 在Thinkphp中使用ajax实现无刷新分页的方法
• thinkPHP基于ajax实现的菜单与分页示例
• thinkPHP5.1框架使用SemanticUI实现分页功能示例
• ThinkPHP5.1+Ajax实现的无刷新分页功能示例