ThinkPHP 整合Bootstrap Ajax分頁，thinkphpbootstrap

ThinkPHP 整合Bootstrap Ajax分頁，thinkphpbootstrap

ThinkPHP Ajax分頁代碼

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

ajax-page是模版中用於替換局部頁面的ID

index_ajax是局部頁面模版

擴展小部件ExtWidget

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

前台模版

我有個index.html模版，這個頁面需要ajax分頁，現在我建立一個index_ajax.html模版，如下圖

index.html是有布局的模版，顯示ajax分頁地方的關鍵代碼如下

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

第一次頁面加載的時候不是ajax渲染的頁面，所以這裡要調用一次index_ajax模版。當點擊分頁時ajax會替換掉這裡的<tbody id="ajax-page"></tbody>內容

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

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

1. <notempty name="datas">
2. <volist name="datas" id="vo">
3. <tr>
4. <td><input class="ids" type="checkbox" name="id[]" value="{$vo.id}"/></td>
5. <td>{$vo.name}</td>
6. <td>
7. <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>
8. <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>
9. </td>
10. </tr>
11. </volist>
12. <else/>
13. <tr><td colspan="100"class="text-center">沒有查詢到數據！</td><tr>
14. </notempty>
15. <notempty name="page">
16. <tr><td colspan="100"class="text-right">{$page}</td><tr>
17. </notempty>

js代碼如下

1. //ajax分頁查詢
2. function ajax_show(id,url){
3. //加載圖片
4. $('#ajax-loading-img').html('<img src="/Public/img/loading.gif" class="margin-r-2" alt="加載中...">');
5. //ajax獲取內容後並替換掉原有信息
6. $.get(url,function(data){$("#"+id).html(data);});
7. returnfalse;
8. }

效果圖

ThinkPHP Ajax分頁帶參數查詢

html代碼

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

js代碼

1. $(function(){
2. $('#my-search').click(function(){
3. var search_form=$("#search-form").serialize();//實例化查詢參數
4.                 var url="{:U('/Admin/Role/index')}"+'?'+search_form;//查詢url
5. return ajax_show('ajax-page',url);//調用ajax分頁
6. });
7. });

效果圖

可以看到分頁的中已經有參數了，並且整個查詢過程都是Ajax無刷新查詢。