Kata Pengantar
Kelas paging yang disertakan dengan rangka kerja thinkphp ialah untuk membelek halaman setiap kali Keseluruhan halaman perlu dimuat semula Pengalaman pengguna membalik halaman ini jelas sekali tidak sesuai mahu. Dengan cara ini, kita boleh dengan mudah memikirkan komunikasi asynchronous ajax, menggunakan ajax Asynchronous berinteraksi dengan pangkalan data (saya menggunakan pangkalan data mysql semasa proses pembangunan), mengembalikan data yang ditanya daripada pangkalan data, menggantikan data asal dengan jquery, dan melaksanakan muat semula separa tanpa menyegarkan halaman, sekali gus mencapai kesan jangkaan kami.
kelas paging thinkphp ajax
Kelas paging ini ialah sumber yang ditemui dalam talian Anda boleh mencipta kelas sedemikian secara langsung dalam thinkphp nama saya di sini ialah AjaxPage.class.php
<?php
// +----------------------------------------------------------------------
// | ThinkPHP [ WE CAN DO IT JUST THINK IT ]
// +----------------------------------------------------------------------
// | Copyright (c) 2009 http://thinkphp.cn All rights reserved.
// +----------------------------------------------------------------------
// | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
// +----------------------------------------------------------------------
// | Author: liu21st <liu21st@gmail.com>
//?+----------------------------------------------------------------------
//?$Id:?Page.class.php?2712?2012-02-06?10:12:49Z?liu21st?$
namespace?Common\Common;
class?AjaxPage?{
????//?分頁欄每頁顯示的頁數(shù)
????public?$rollPage?=?5;
????//?頁數(shù)跳轉(zhuǎn)時(shí)要帶的參數(shù)
????public?$parameter??;
????//?默認(rèn)列表每頁顯示行數(shù)
????public?$listRows?=?20;
????//?起始行數(shù)
????public?$firstRow?;
????//?分頁總頁面數(shù)
????protected?$totalPages??;
????//?總行數(shù)
????protected?$totalRows??;
????//?當(dāng)前頁數(shù)
????protected?$nowPage????;
????//?分頁的欄的總頁數(shù)
????protected?$coolPages???;
????//?分頁顯示定制
????protected?$config??=?array('header'=>'條記錄','prev'=>'上一頁','next'=>'下一頁','first'=>'第一頁','last'=>'最后一頁','theme'=>'?%totalRow%?%header%?%nowPage%/%totalPage%?頁?%upPage%?%downPage%?%first%??%prePage%??%linkPage%??%nextPage%?%end%');
????//?默認(rèn)分頁變量名
????protected?$varPage;
????public?function?__construct($totalRows,$listRows='',$ajax_func,$parameter='')?{
????????$this->totalRows?=?$totalRows;
????????$this->ajax_func?=?$ajax_func;
????????$this->parameter?=?$parameter;
????????$this->varPage?=?C('VAR_PAGE')???C('VAR_PAGE')?:?'p'?;
????????if(!empty($listRows))?{
????????????$this->listRows?=?intval($listRows);
????????}
????????$this->totalPages?=?ceil($this->totalRows/$this->listRows);?????//總頁數(shù)
????????$this->coolPages??=?ceil($this->totalPages/$this->rollPage);
????????$this->nowPage??=?!empty($_GET[$this->varPage])?intval($_GET[$this->varPage]):1;
????????if(!empty($this->totalPages)?&&?$this->nowPage>$this->totalPages)?{
????????????$this->nowPage?=?$this->totalPages;
????????}
????????$this->firstRow?=?$this->listRows*($this->nowPage-1);
????}
?????public?function?nowpage($totalRows,$listRows='',$ajax_func,$parameter='')?{
????????$this->totalRows?=?$totalRows;
????????$this->ajax_func?=?$ajax_func;
????????$this->parameter?=?$parameter;
????????$this->varPage?=?C('VAR_PAGE')???C('VAR_PAGE')?:?'p'?;
????????if(!empty($listRows))?{
????????????$this->listRows?=?intval($listRows);
????????}
????????$this->totalPages?=?ceil($this->totalRows/$this->listRows);?????//總頁數(shù)
????????$this->coolPages??=?ceil($this->totalPages/$this->rollPage);
????????$this->nowPage??=?!empty($_GET[$this->varPage])?intval($_GET[$this->varPage]):1;
????????if(!empty($this->totalPages)?&&?$this->nowPage>$this->totalPages)?{
????????????$this->nowPage?=?$this->totalPages;
????????}
????????$this->firstRow?=?$this->listRows*($this->nowPage-1);
????????return?$this->nowPage;
????}
????public?function?setConfig($name,$value)?{
????????if(isset($this->config[$name]))?{
????????????$this->config[$name]????=???$value;
????????}
????}
????public?function?show()?{
????????if(0?==?$this->totalRows)?return?'';
????????$p?=?$this->varPage;
????????$nowCoolPage??????=?ceil($this->nowPage/$this->rollPage);
????????$url??=??$_SERVER['REQUEST_URI'].(strpos($_SERVER['REQUEST_URI'],'?')?'':"?").$this->parameter;
????????$parse?=?parse_url($url);
????????if(isset($parse['query']))?{
????????????parse_str($parse['query'],$params);
????????????unset($params[$p]);
????????????$url???=??$parse['path'].'?'.http_build_query($params);
????????}
????????//上下翻頁字符串
????????$upRow???=?$this->nowPage-1;
????????$downRow?=?$this->nowPage+1;
????????if?($upRow>0){
????????????$upPage="<a class='ajaxify' id='big' href='JavaScript:".$this->ajax_func."(".$upRow.")'>".$this->config['prev']."</a>";
????????}else{
????????????$upPage="";
????????}
????????if?($downRow?<= $this->totalPages){
????????????$downPage="<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$downRow.")'>".$this->config['next']."</a>";
????????}else{
????????????$downPage="";
????????}
????????//?<< < >?>>
????????if($nowCoolPage?==?1){
????????????$theFirst?=?"";
????????????$prePage?=?"";
????????}else{
????????????$preRow?=??$this->nowPage-$this->rollPage;
????????????$prePage?=?"<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$preRow.")'>上".$this->rollPage."頁</a>";
????????????$theFirst?=?"<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(1)'?>".$this->config['first']."</a>";
????????}
????????if($nowCoolPage?==?$this->coolPages){
????????????$nextPage?=?"";
????????????$theEnd="";
????????}else{
????????????$nextRow?=?$this->nowPage+$this->rollPage;
????????????$theEndRow?=?$this->totalPages;
????????????$nextPage?=?"<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$nextRow.")'?>下".$this->rollPage."頁</a>";
????????????$theEnd?=?"<a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$theEndRow.")'?>".$this->config['last']."</a>";
????????}
????????//?1?2?3?4?5
????????$linkPage?=?"";
????????for($i=1;$i<=$this->rollPage;$i++){
????????????$page=($nowCoolPage-1)*$this->rollPage+$i;
????????????if($page!=$this->nowPage){
????????????????if($page<=$this->totalPages){
???????????????????$linkPage?.=?" <a class='ajaxify' id='big' href='javascript:".$this->ajax_func."(".$page.")'> ".$page." </a>";
????????????????}else{
????????????????????break;
????????????????}
????????????}else{
????????????????if($this->totalPages?!=?1){
????????????????????$linkPage?.=?" <span class='current'>".$page."</span>";
????????????????}
????????????}
????????}
????????$pageStr??=??str_replace(
????????????array('%header%','%nowPage%','%totalRow%','%totalPage%','%upPage%','%downPage%','%first%','%prePage%','%linkPage%','%nextPage%','%end%'),
????????????array($this->config['header'],$this->nowPage,$this->totalRows,$this->totalPages,$upPage,$downPage,$theFirst,$prePage,$linkPage,$nextPage,$theEnd),$this->config['theme']);
????????return?$pageStr;
????}
}
?>
Langkah khusus
Seterusnya, kami akan melaksanakan kesan paging tidak menyegarkan thinkphp langkah demi langkah bermula dari pengawal.
1. Bahagian pengawal
Ini hanyalah kod teras pengawal.
????????//實(shí)例化數(shù)據(jù)模型
????????$info=M('info');
????????//統(tǒng)計(jì)要查詢數(shù)據(jù)的數(shù)量
????????$count=$info->where("ID='$id'")->count();
????????//實(shí)例化分頁類，傳入三個(gè)參數(shù)，分別是數(shù)據(jù)總數(shù)、每頁顯示的數(shù)據(jù)條數(shù)、要調(diào)用的jQuery?ajax方法名
????????$p=new?\Host\Common\AjaxPage($count,10,'server');
????????//產(chǎn)生分頁信息
????????$page=$p->show();
????????//要查詢的數(shù)據(jù),limit表示每頁查詢的數(shù)量，這里為10條
????????$data?=?$server_info->where("ID='$id'")->limit($p->firstRow.','.$p->listRows)->select();
????????//assign方法往模板賦值
????????$this->assign('list',$data);
????????$this->assign('page',$page);
????????//ajax返回信息
????????$res["content"]?=?$this->fetch('Index/myinfolist')
????????$this->ajaxReturn($res);
2. Bahagian templat
Nama templat: myinfolist.html adalah konsisten dengan templat yang diberikan dalam pengawal di atas.
?$res["content"]?=?$this->fetch('Index/myinfolist')
Oleh kerana bahagian hadapan menggunakan rangka kerja bootstrap, banyak kelas dalam templat ini adalah daripada bootstrap Anda tidak perlu terlalu risau tentang perkara ini .
<!DOCTYPE html>
<head>
</head>
????<p id="server">
????????<p class="row-fluid" >
????????????<p class="span12">
????????????????<p class="portlet box green">
????????????????????<p class="portlet-title">
????????????????????????<p class="caption"><i class="icon-globe"></i>信息列表</p>
????????????????????</p>
????????????????????<p class="portlet-body" >
????????????????
????????????????????????<table class="table table-striped table-bordered table-hover table-full-width" id="sample_1">
????????????????????????????<thead>
????????????????????????????????<tr>
????????????????????????????????????<th class="hidden-480">a</th>
????????????????????????????????????<th class="hidden-480">b</th>
????????????????????????????????????<th class="hidden-480">c</th>
????????????????????????????????????<th class="hidden-480">d</th>
????????????????????????????????</tr>
????????????????????????????</thead>
????????????????????????????<tbody>
????????????????????????????????????//循環(huán)賦值
????????????????????????????????????<foreach name='list' item='info'>
????????????????????????????????????????<tr>
????????????????????????????????????????????<td>{$info.a}</td>
????????????????????????????????????????????<td>{$info.b}</td>?????
????????????????????????????????????????????<td>{$info.c}</td>
????????????????????????????????????????????<td>{$info.d}</td>
?????????????????????????????????????????
????????????????????????????????????????</tr>
????????????????????????????????????</foreach>
????????????????????????????????
????????????????????????????</tbody>
????????????????????????????
????????????????????????</table>
????????????????????????//分頁信息
????????????????????????<p class="row-fluid">?{$page}?</p>
????????????????????????
????????????????????</p>
????????????????</p>????
????????????</p>????????
????????</p>
????</p>
????
????<script src="__PUBLIC__/server.js"></script>?
</html>
Bahagian 3.js
Langkah ini adalah fokus merealisasikan paging bukan penyegaran ajax Ia menggunakan komunikasi ajax jQuery dan menulis data yang diperoleh melalui interaksi ajax dengan pangkalan data ke templat dan menggantikan set data sebelumnya untuk mencapai tujuan paging.
server.js
function?server(id){??
?????????var?id?=?id;
????????????$.get('/Server/myinfo',?{'p':id},?function(data){??
????????????//用get方法發(fā)送信息到Server中的myinfo方法
?????????????$("#server").replaceWith("<p id='user7'>"
?????????????+data.content+
?????????????"</p>");?
????????});
????}
Pelayan nama kaedah ini ialah parameter ketiga yang diluluskan dalam kelas paging instantiated dalam pengawal Setiap kali anda mengklik pada templat untuk membelok halaman, pelayan kaedah js ini akan dicetuskan (p), apakah nombor halaman yang dilalui di dalamnya.
$p=new?\Host\Common\AjaxPage($count,10,'server');
Apa yang digunakan di sini ialah bentuk .get kaedah ajax dalam jQuery untuk berkomunikasi antara ajax dan latar belakang Gunakan kaedah replaceWith untuk mendapatkan data yang dikembalikan dan gantikan templat dengan
<p id='user7'>+數(shù)據(jù)</p>
Id ialah p pelayan untuk mencapai kesan paging.
Ringkasan
Langkah di atas adalah langkah khusus untuk melaksanakan kaedah ajax jQuery termasuk $.ajax, $.get dan $.post kod Dalam program saya, untuk tidak mendedahkan beberapa medan data saya, saya menggantikannya dengan abcd dan membuat pemadaman tertentu Jika terdapat sebarang masalah, saya harap anda boleh membetulkannya dan berkomunikasi dengan lebih lanjut.
