thinkphp 프레임워크와 함께 제공되는 페이지 일부의 Ajax 새로 고침이 아닌 페이징은 페이지를 넘길 때마다 전체 페이지를 새로 고쳐야 합니다. 이런 종류의 페이지 넘기기 사용자 경험은 분명히 아닙니다. 이상적으로는 페이지를 넘길 때마다 원하는 데이터 세트 부분의 데이터만 새로 고치기를 바랍니다. 이러한 방식으로 ajax를 사용하여 데이터베이스와 비동기식으로 상호 작용하는 Ajax 비동기 통신을 쉽게 생각할 수 있습니다. 개발 과정에서 mysql 데이터베이스를 사용하고, 데이터베이스에서 데이터를 가져오며, 쿼리된 데이터가 반환되고 원본 데이터가 jquery로 대체되므로 페이지를 새로 고치지 않고도 부분 새로 고침을 수행할 수 있습니다. 원하는 효과.
thinkphp ajax 페이징 클래스
이 페이징 클래스는 온라인에서 찾을 수 있는 리소스입니다. 내 클래스 이름은 AjaxPage.class.php입니다. 필요한 경우 네임스페이스를 수정할 수 있습니다
<?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;
}
}로그인 후 복사
특정 단계
1. Controller
이제 index 메소드에 표시되고, page 메소드에 fetch 및 ajaxReturn이 표시됩니다. 여기서 fetch는 참조 페이지(article)
<?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);
}
}로그인 후 복사
2.Column 템플릿 인덱스입니다. html
<!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>로그인 후 복사
<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>로그인 후 복사
이 단계는 ajax non-refresh 페이징을 구현하는 데 중점을 둡니다. jQuery의 ajax 상호 작용을 사용합니다. 데이터베이스를 사용하면 얻은 데이터가 템플릿에 기록되고 이전 데이터 세트가 페이징 목적을 달성합니다. server.js는 내부 또는 외부에서 작성할 수 있으며 자유롭게 선택할 수 있습니다
<script>
function server(pid){
var pid = pid;
$.get("{:U('Index/page')}", "p="+pid, function(data){
$("#server").replaceWith("<p id='server'>"
+data.content+
"</p>");
});
}
</script>로그인 후 복사
$p=new \Think\AjaxPage($count,4,'server');
로그인 후 복사
<div id='server'>+数据</div>
로그인 후 복사
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
