前端之家收集整理的这篇文章主要介绍了
ThinkPHP 整合Bootstrap Ajax分页样式,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
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','
');//分页条数
$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分页地方的关键代码如下
Box"/>
名称 |
|
array('partial'=>'Role/index_ajax','data'=>$datas,'page'=>$page)))}
第一次页面加载的时候不是ajax渲染的页面,所以这里要调用一次index_ajax模版。当点击分页时ajax会替换掉这里的内容
$page)))}
index_ajax.html
是没有布局的模版,只是为了显示数据。代码如下
Box" name="id[]" value="{$vo.id}"/>
修改
删除
查询到数据!
js代码如下
分页
查询
function ajax_show(id,url){
//加载
图片
$('#ajax-loading-img').html('
获取
内容后并替换掉原有信息
$.get(url,function(data){$("#"+id).html(data);});
returnfalse;
}
效果图
PHP;">
$(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
分页
});
});
效果图
可以看到分页的中已经有参数了,并且整个查询过程都是Ajax无刷新查询。
以上所述是小编给大家介绍的ThinkPHP 整合Bootstrap Ajax分页样式。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
原文链接:https://www.f2er.com/thinkphp/18212.html