Die Paging-Klasse, die mit dem thinkphp-Framework geliefert wird, erfordert bei jedem Umblättern eine Aktualisierung der gesamten Seite. Diese Art von Seitenwechsel-Benutzererfahrung ist offensichtlich nicht der Fall Im Idealfall hoffen wir, dass wir jedes Mal, wenn wir die Seite umblättern, nur die Daten in dem Teil des Datensatzes aktualisieren, den wir möchten. Auf diese Weise können wir uns leicht eine asynchrone Ajax-Kommunikation vorstellen, bei der Ajax für die asynchrone Interaktion mit der Datenbank verwendet wird. Ich verwende während des Entwicklungsprozesses eine MySQL-Datenbank, und die Daten werden aus der Datenbank abgerufen. Die abgefragten Daten werden zurückgegeben und die Originaldaten werden durch JQuery ersetzt, sodass eine teilweise Aktualisierung durchgeführt werden kann, ohne die Seite zu aktualisieren, wodurch Folgendes erreicht wird gewünschten Effekt.
thinkphp Ajax-Paging-Klasse
Diese Paging-Klasse ist eine online verfügbare Ressource. Sie können eine solche Klasse direkt in Ihrem eigenen thinkphp erstellen. Bei Bedarf können Sie den Namespace ändern
Spezifische Schritte1. Jetzt in der Indexmethode anzeigen und dann in der Seitenmethode abrufen und ajax zurückgeben. Beachten Sie hier, dass der Abruf die Referenzseite (Artikel) ist. Vorlage
Spaltenvorlagenindex. html
<?php
namespace Think;
class AjaxPage {
// 分页栏每页显示的页数
public $rollPage = 5;
// 页数跳转时要带的参数
public $parameter ;
// 默认列表每页显示行数
public $listRows = 20;
// 起始行数
public $firstRow ;
// 分页总页面数
protected $totalPages ;
// 总行数
protected $totalRows ;
// 当前页数
protected $nowPage ;
// 分页的栏的总页数
protected $coolPages ;
// 分页显示定制
protected $config = array('header'=>'条记录','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="<a class='ajaxify' id='big' href='JavaScript:;' onclick='".$this->ajax_func."(".$upRow.")'>".$this->config['prev']."</a>";
}else{
$upPage="";
}
if ($downRow <= $this->totalPages){
$downPage="<a class='ajaxify' id='big' href='JavaScript:;' onclick='".$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:;' onclick='".$this->ajax_func."(".$preRow.")'>上".$this->rollPage."页</a>";
$theFirst = "<a class='ajaxify' id='big' href='JavaScript:;' onclick='".$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:;' onclick='".$this->ajax_func."(".$nextRow.")' >下".$this->rollPage."页</a>";
$theEnd = "<a class='ajaxify' id='big' href='JavaScript:;' onclick='".$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:;' onclick='".$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;
}
}Die Vorlage, die paginiert werden muss. Der Inhalt oberhalb des paginierten Inhalts wird nicht erneut geladen. Die Webseite wird erneut durcheinander gebracht Mit der Datenbank werden die erhaltenen Daten in die Vorlage geschrieben und ersetzen den vorherigen Datensatz. server.js, kann intern oder extern geschrieben werden, Sie können frei wählen
<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
public function index(){
$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);
// $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);
}
}Dieser Methodennamenserver ist der dritte Parameter, der in der instanziierten Paging-Klasse im Controller übergeben wird. Er wird jedes Mal ausgelöst, wenn Sie auf die Vorlage klicken, um den zu aktivieren Seite. Diese js-Methode server(p) übergibt die Seitennummer welcher Seite.
<!DOCTYPE html>
<html>
<head>
</head>
<p>
hello world
</p>
<include file="Index/article" />
<script>
function server(pid){
var pid = pid;
$.get("{:U('Index/page')}", "p="+pid, function(data){
$("#server").replaceWith("<p id='server'>"
+data.content+
"</p>");
});
}
</script>
<script src="__PUBLIC__/jq/jquery1.8.3.min.js"></script>
</html>Hier wird die .get-Form der Ajax-Methode in jQuery verwendet, um zwischen Ajax und dem Hintergrund zu kommunizieren. Um die zurückgegebenen Daten zu erhalten, verwenden Sie die Methode „replaceWith“ und verwenden Sie
<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>, um das p durch die ID von zu ersetzen Server in der Vorlage, um den Paging-Effekt zu erzielen.
Empfohlenes Lernen: „Thinkphp-Video-Tutorial
“
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
