La classe de pagination fournie avec le framework thinkphp nécessite que la page entière soit actualisée à chaque fois qu'elle est tournée. Ce type d'expérience utilisateur qui tourne une page est. évidemment pas idéal. , nous espérons qu'à chaque fois que nous tournons la page, nous actualisons uniquement les données dans la partie de l'ensemble de données que nous voulons. De cette façon, nous pouvons facilement penser à une communication asynchrone ajax, en utilisant ajax pour interagir de manière asynchrone avec le. base de données (j'utilise la base de données mysql pendant le processus de développement), et les données seront récupérées de la base de données. Les données interrogées sont renvoyées et les données d'origine sont remplacées par jquery, de sorte qu'une actualisation partielle puisse être effectuée sans actualiser la page, ainsi. obtenir l'effet désiré.
classe de pagination thinkphp ajax
Cette classe de pagination est une ressource trouvée en ligne. Vous pouvez créer une telle classe directement dans votre propre thinkphp. Mon nom de classe ici est AjaxPage.class.php. Si nécessaire, vous pouvez modifier l'espace de noms
1f87a0dc59f026a747ee557226eb4900'条记录','prev'=>'上一页','next'=>'下一页','first'=>'第一页','last'=>'最后一页','theme'=>' %totalRow% %header% %nowPage%/%totalPage% 页 %upPage% %downPage% %first% %prePage% %linkPage% %nextPage% %end%');
// 默认分页变量名
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); //总页数
$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); //总页数
$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="4c6ddcfa986b1cfd4b100c516dd444ceajax_func."(".$upRow.")'>".$this->config['prev']."5db79b134e9f6b82c0b36e0489ee08ed";
}else{
$upPage="";
}
if ($downRow 8aa9cd03f13872f1c27a1dd7dc85aa49totalPages){
$downPage="4c6ddcfa986b1cfd4b100c516dd444ceajax_func."(".$downRow.")'>".$this->config['next']."5db79b134e9f6b82c0b36e0489ee08ed";
}else{
$downPage="";
}
// 5e91ac722550d2d65fc65c3024cfc1f6 >>
if($nowCoolPage == 1){
$theFirst = "";
$prePage = "";
}else{
$preRow = $this->nowPage-$this->rollPage;
$prePage = "4c6ddcfa986b1cfd4b100c516dd444ceajax_func."(".$preRow.")'>上".$this->rollPage."页5db79b134e9f6b82c0b36e0489ee08ed";
$theFirst = "4c6ddcfa986b1cfd4b100c516dd444ceajax_func."(1)' >".$this->config['first']."5db79b134e9f6b82c0b36e0489ee08ed";
}
if($nowCoolPage == $this->coolPages){
$nextPage = "";
$theEnd="";
}else{
$nextRow = $this->nowPage+$this->rollPage;
$theEndRow = $this->totalPages;
$nextPage = "4c6ddcfa986b1cfd4b100c516dd444ceajax_func."(".$nextRow.")' >下".$this->rollPage."页5db79b134e9f6b82c0b36e0489ee08ed";
$theEnd = "4c6ddcfa986b1cfd4b100c516dd444ceajax_func."(".$theEndRow.")' >".$this->config['last']."5db79b134e9f6b82c0b36e0489ee08ed";
}
// 1 2 3 4 5
$linkPage = "";
for($i=1;$i930cdc47afbfa294d5d6bff505cbe3ddrollPage;$i++){
$page=($nowCoolPage-1)*$this->rollPage+$i;
if($page!=$this->nowPage){
if($page930cdc47afbfa294d5d6bff505cbe3ddtotalPages){
$linkPage .= " 4c6ddcfa986b1cfd4b100c516dd444ceajax_func."(".$page.")'> ".$page." 5db79b134e9f6b82c0b36e0489ee08ed";
}else{
break;
}
}else{
if($this->totalPages != 1){
$linkPage .= " c9c3467744b1ee299b813ab65906400d".$page."54bdf357c58b8a65c66d7c19c8e4d114";
}
}
}
$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;
}
}. Étapes spécifiques
1. Contrôleur
Affichez maintenant dans la méthode d'index, puis récupérez et ajaxReturn dans la méthode de page Notez ici que la récupération est la page de référence (article)
cd43c1cac171b9d5901cb44c2adcb334count();
//实例化分页类，传入三个参数，分别是数据总数、每页显示的数据条数、要调用的jQuery ajax方法名
$p=new \Think\AjaxPage($count,4,'server');
//产生分页信息
$page=$p->show();
//要查询的数据,limit表示每页查询的数量，这里为4条
$data = $info->limit($p->firstRow.','.$p->listRows)->select();
//assign方法往模板赋值
$this->assign('list',$data);
$this->assign('page',$page);
// $res["content"] = $this->fetch('Index/index');
// $this->ajaxReturn($res);
$this->display();
}
public function page(){
//实例化数据模型
$info=M('info');
//统计要查询数据的数量
$count=$info->count();
//实例化分页类，传入三个参数，分别是数据总数、每页显示的数据条数、要调用的jQuery ajax方法名
$p=new \Think\AjaxPage($count,4,'server');
//产生分页信息
$page=$p->show();
//要查询的数据,limit表示每页查询的数量，这里为4条
$data = $info->limit($p->firstRow.','.$p->listRows)->select();
//assign方法往模板赋值
$this->assign('list',$data);
$this->assign('page',$page);
//ajax返回信息
$res["content"] = $this->fetch('Index/article');
$this->ajaxReturn($res);
}
}
2. html
76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
93f0f5c25f18dab9d176bd4f6de5d30e
9c3bca370b5104690d9ef395f2c5f8d1
e388a4556c0f65e1904146cc1a846bee
hello world
94b3e26ee717c64999d7867364b1b4a3
4826afc8bc0934c5141d6810ee82aa53
3f1c4e4b6b16bbbd69b2ee476dc4f83a
function server(pid){
var pid = pid;
$.get("{:U('Index/page')}", "p="+pid, function(data){
$("#server").replaceWith("7db81b6f8cec3ce3f482d60b8ae1b72c"
+data.content+
"94b3e26ee717c64999d7867364b1b4a3");
});
}
2cacc6d41bbb37262a98f745aa00fbf0
6432ecebf4dfccad7c9cdaa663a4dfcc2cacc6d41bbb37262a98f745aa00fbf0
73a6ac4ed44ffec12cee46588e518a5eLe modèle qui doit être paginéarticle.html <div id="server">
<div class="row-fluid" >
<div class="span12">
<div class="portlet box green">
<div class="portlet-title">
<div class="caption"><i class="icon-globe"></i>信息列表</div>
</div>
<div 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>
//循环赋值
<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>
//分页信息
<div class="row-fluid"> {$page} </div>
</div>
</div>
</div>
</div>
</div>Cela peut garantir que lorsque vous cliquez sur le numéro de page, le le contenu au-dessus du contenu paginé ne sera pas chargé à nouveau. Une fois de plus, la page Web sera gâchéePartie 3.jsCette étape est au centre de la réalisation de la pagination ajax sans actualisation. Elle utilise la communication ajax de jQuery via l'interaction ajax avec. la base de données, les données obtenues sont écrites dans le modèle et remplacent les précédentes. L'ensemble de données atteint l'objectif de pagination. server.js , peut être écrit en interne ou en externe, vous pouvez choisir librement
3f1c4e4b6b16bbbd69b2ee476dc4f83a
function server(pid){
var pid = pid;
$.get("{:U('Index/page')}", "p="+pid, function(data){
$("#server").replaceWith("7db81b6f8cec3ce3f482d60b8ae1b72c"
+data.content+
"94b3e26ee717c64999d7867364b1b4a3");
});
}
2cacc6d41bbb37262a98f745aa00fbf0Ce serveur de noms de méthode est le troisième paramètre passé dans la classe de pagination instanciée dans le contrôleur. Il sera déclenché à chaque fois que vous cliquerez sur le modèle pour activer le. page. Ce serveur de méthode js (p) transmet le numéro de page de quelle page.
$p=new \Think\AjaxPage($count,4,'server');Ce qui est utilisé ici est la forme .get de la méthode ajax dans jQuery pour communiquer entre ajax et l'arrière-plan. Pour obtenir les données renvoyées, utilisez la méthode replaceWith et utilisez
<div id='server'>+数据</div>pour remplacer le p par l'identifiant de. serveur dans le modèle pour obtenir l'effet de pagination.