bootstrap php ajax,ThinkPHP 整合Bootstrap Ajax分页样式

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

46552e266c5a5e3328073d9a92ec20eb.gif

前台模版

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

3458a68f333ada7c9f5beb96a0eed4cf.gif

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}

修改

 删除

没有查询到数据!{$page}

js代码如下

//ajax分页查询

function ajax_show(id,url){

//加载图片

$('#ajax-loading-img').html('加载中...');

//ajax获取内容后并替换掉原有信息

$.get(url,function(data){$("#"+id).html(data);});

returnfalse;

}

效果图

a70bb9a55da2a38a021c9e46e1a60ece.gif

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分页

});

});

效果图

c5713c69b63dbaae4c3b679a11b578e2.gif

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值