快捷導(dǎo)航

ThinkPHP 整合Bootstrap Ajax分頁(yè)樣式

更新時(shí)間：2016年12月23日 09:39:10 作者：285267128

這篇文章主要介紹了ThinkPHP 整合Bootstrap Ajax分頁(yè)的相關(guān)資料,需要的朋友可以參考下

ThinkPHP Ajax分頁(yè)代碼

publicfunction index()
{
$where=array();
$name = I('name');
if(!empty($name)){
$where['name']= array('like','%'.(string)$name.'%');
}
$Role=M('Role');
$count= $Role->where($where)->count();// 查詢滿足要求的總記錄數(shù)
$Page =new \Think\AjaxPage($count,'ajax-page',10);// 實(shí)例化分頁(yè)類 傳入總記錄數(shù)、ajax更新的局部頁(yè)面ID和每頁(yè)顯示的記錄數(shù)(10)
$Page->lastSuffix=false;
$Page->setConfig('first','首頁(yè)');
$Page->setConfig('last','末頁(yè)');
$Page->setConfig('header','<span class="rows btn btn-default margin-l-2">共 %TOTAL_ROW% 條</span>');//分頁(yè)條數(shù)
$Page->setConfig('theme','%FIRST% %UP_PAGE% %LINK_PAGE% %DOWN_PAGE% %END% %HEADER%');//分頁(yè)樣式：首頁(yè)、末頁(yè)等
$show= $Page->show();// 分頁(yè)顯示輸出
// 進(jìn)行分頁(yè)數(shù)據(jù)查詢 注意limit方法的參數(shù)要使用Page類的屬性
$datas = $Role->where($where)->order('id desc')->limit($Page->firstRow.','.$Page->listRows)->select();
$this->assign('datas',$datas);// 賦值數(shù)據(jù)集
$this->assign('page',$show);// 賦值分頁(yè)輸出
if(IS_AJAX){
$this->display('index_ajax');
}else{
$this->display();
}
}

ajax-page是模版中用于替換局部頁(yè)面的ID

index_ajax是局部頁(yè)面模版

擴(kuò)展小部件ExtWidget

我是在Admin模塊下建的這個(gè)類/Application/Admin/Widget/ExtWidget.class.php所有如下圖

前臺(tái)模版

我有個(gè)index.html模版，這個(gè)頁(yè)面需要ajax分頁(yè)，現(xiàn)在我建立一個(gè)index_ajax.html模版，如下圖

index.html是有布局的模版，顯示ajax分頁(yè)地方的關(guān)鍵代碼如下

<table id="users"class="table table-bordered table-hover table-striped">
 <thead>
 <tr>
  <th><input class="check-all" type="checkbox"/></th>
  <th width="90%">名稱</th>
  <th width="10%">操作</th>
 </tr>
 </thead>
 <tbody id="ajax-page">
 {:W('Ext/renderPartial',array('data'=>array('partial'=>'Role/index_ajax','data'=>$datas,'page'=>$page)))}
 </tbody>
</table>

第一次頁(yè)面加載的時(shí)候不是ajax渲染的頁(yè)面，所以這里要調(diào)用一次index_ajax模版。當(dāng)點(diǎn)擊分頁(yè)時(shí)ajax會(huì)替換掉這里的<tbody id="ajax-page"></tbody>內(nèi)容

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

index_ajax.html是沒有布局的模版,只是為了顯示數(shù)據(jù)。代碼如下

 <notempty name="datas">
<volist name="datas" id="vo">
<tr>
<td><input class="ids" type="checkbox" name="id[]" value="{$vo.id}"/></td>
<td>{$vo.name}</td>
<td>
<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>
<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>
</td>
</tr>
</volist>
<else/>
<tr><td colspan="100"class="text-center">沒有查詢到數(shù)據(jù)！</td><tr>
</notempty>
<notempty name="page">
<tr><td colspan="100"class="text-right">{$page}</td><tr>
</notempty>

js代碼如下

//ajax分頁(yè)查詢
function ajax_show(id,url){
//加載圖片
$('#ajax-loading-img').html('<img src="/Public/img/loading.gif" class="margin-r-2" alt="加載中...">');
//ajax獲取內(nèi)容后并替換掉原有信息
$.get(url,function(data){$("#"+id).html(data);});
returnfalse;
}

效果圖

ThinkPHP Ajax分頁(yè)帶參數(shù)查詢

html代碼

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

js代碼

$(function(){
$('#my-search').click(function(){
var search_form=$("#search-form").serialize();//實(shí)例化查詢參數(shù)
  var url="{:U('/Admin/Role/index')}"+'?'+search_form;//查詢url
return ajax_show('ajax-page',url);//調(diào)用ajax分頁(yè)
});
});

效果圖