189 8069 5689

ThinkPHP如何整合BootstrapAjax分页样式-创新互联

小编给大家分享一下ThinkPHP如何整合Bootstrap Ajax分页样式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

10年积累的网站设计制作、网站设计经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有眉县免费网站建设让你可以放心的选择与我们合作。

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所有如下图

ThinkPHP如何整合Bootstrap Ajax分页样式

前台模版

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

ThinkPHP如何整合Bootstrap Ajax分页样式

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如何整合Bootstrap Ajax分页样式

ThinkPHP Ajax分页带参数查询

html代码



名称:
查询

js代码

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

效果图

ThinkPHP如何整合Bootstrap Ajax分页样式

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

以上是“ThinkPHP如何整合Bootstrap Ajax分页样式”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


网页标题:ThinkPHP如何整合BootstrapAjax分页样式-创新互联
新闻来源:http://cdxtjz.com/article/edohc.html

其他资讯