머리말
thinkphp 프레임워크와 함께 제공되는 페이징 클래스는 페이지를 넘길 때마다 전체 페이지를 새로 고쳐야 합니다. 이러한 종류의 페이지 전환 사용자 경험은 다음과 같습니다. 분명히 좋지는 않습니다. 이상적으로는 페이지를 넘길 때마다 원하는 데이터 세트 부분의 데이터만 새로 고치기를 바랍니다. 이런 식으로 ajax를 사용하여 비동기식으로 상호 작용하는 ajax 비동기 통신을 쉽게 생각할 수 있습니다. 데이터베이스(개발 과정에서 mysql 데이터베이스를 사용함), 데이터베이스에서 쿼리한 데이터가 반환되고 원본 데이터가 jquery로 대체되므로 페이지를 새로 고치지 않고도 부분 새로 고침을 수행할 수 있으므로 원하는 효과를 얻을 수 있습니다.
thinkphp ajax 페이징 클래스
이 페이징 클래스는 온라인에서 찾을 수 있는 리소스입니다. 내 클래스 이름은 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 {
// 分页栏每页显示的页数
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:".$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;
}
}
?>로그인 후 복사
특정 단계
다음으로 시작합니다. 컨트롤러에서 thinkphp 비새로 고침 페이징 효과를 단계별로 구현합니다.
1. 컨트롤러 부분
컨트롤러 부분의 핵심 코드입니다.
//实例化数据模型
$info=M('info');
//统计要查询数据的数量
$count=$info->where("ID='$id'")->count();
//实例化分页类，传入三个参数，分别是数据总数、每页显示的数据条数、要调用的jQuery ajax方法名
$p=new \Host\Common\AjaxPage($count,10,'server');
//产生分页信息
$page=$p->show();
//要查询的数据,limit表示每页查询的数量，这里为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. 템플릿 부분
템플릿 이름: myinfolist.html은 위 컨트롤러에서 렌더링된 템플릿과 일치합니다.
$res["content"] = $this->fetch('Index/myinfolist')로그인 후 복사
프론트엔드는 부트스트랩 프레임워크를 사용하기 때문에 이 템플릿의 많은 클래스는 부트스트랩에서 가져온 것입니다. 전체 프로세스의 핵심 사항만 보면 됩니다.
<!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>
//循环赋值
<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>로그인 후 복사
3.js 부분
이 단계는 ajax non-refresh 페이징을 구현하는 데 중점을 둡니다. jQuery의 ajax 통신을 사용하여 데이터베이스와 상호 작용하여 얻은 데이터가 템플릿에 기록되고 이전 데이터 세트를 대체합니다. , 페이징 목적을 달성하기 위해.
server.js
function server(id){
var id = id;
$.get('/Server/myinfo', {'p':id}, function(data){
//用get方法发送信息到Server中的myinfo方法
$("#server").replaceWith("<p id='user7'>"
+data.content+
"</p>");
});
}로그인 후 복사
이 메소드 이름 서버는 컨트롤러의 인스턴스화된 페이징 클래스에 전달되는 세 번째 매개변수입니다. 템플릿을 클릭하여 페이지를 넘길 때마다 이 js 메소드 서버(p)가 트리거됩니다. 내부에 전달되는 것은 페이지의 페이지 번호입니다.
$p=new \Host\Common\AjaxPage($count,10,'server');
로그인 후 복사
여기서 사용되는 것은 ajax와 백그라운드 간 통신을 위한 jQuery의 ajax 메서드의 .get 형식입니다. 반환된 데이터를 얻으려면 replacementWith 메서드를 사용하고
<p id='user7'>+数据</p>
로그인 후 복사
를 사용하여 p를 id로 바꿉니다. 페이징 효과를 얻기 위해 템플릿에 서버를 추가합니다.
요약
위 단계는 ajax 페이징을 구현하는 구체적인 단계입니다. jQuery의 ajax 메소드에는 $.ajax, $.get 및 $.post가 포함됩니다. 여기서는 코드를 소개하지 않겠습니다. 내 데이터 필드 중 일부를 공개하지 않기 위해 abcd로 대체하고 일부 삭제했습니다. 문제가 있으면 수정하고 더 많은 소통을 해주시기 바랍니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
