The paging class that comes with the thinkphp framework requires the entire page to be refreshed every time the page is turned. , this kind of page-turning user experience is obviously not ideal. We hope that each time we turn the page, we only refresh the data in the part of the data set we want. In this way, we can easily think of ajax asynchronous communication, using ajax to communicate with the database (I am developing The process uses mysql database) asynchronous interaction, returns the data queried from the database, replaces the original data with jquery, and performs partial refresh without refreshing the page, thus achieving the desired effect.
thinkphp ajax paging class
This paging class is a resource found on the Internet. You can create such a class directly in your own thinkphp. The class name here is AjaxPage.class.php, such as If necessary, you can modify the namespace
<?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;
}
}Specific steps
1. Controller
Now display in the index method, and then fetch and ajaxReturn in the page method. Pay attention here The fetch is the reference page (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. Template
Column template index.html
Among them, the referenced template is the part of the content that needs to be paginated
<!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>Template that requires paging
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>This can ensure that when you click on the page number, the content above the paging content will not be loaded again, causing the web page to be messed up
3.js part
This step is the focus of realizing ajax non-refresh paging. It uses jQuery's ajax communication. Through ajax interaction with the database, the obtained data is written to the template and replaces the previous data. Set to achieve the purpose of paging. server.js , can be written internally or externally, you can choose freely
<script>
function server(pid){
var pid = pid;
$.get("{:U('Index/page')}", "p="+pid, function(data){
$("#server").replaceWith("<p id='server'>"
+data.content+
"</p>");
});
}
</script>This method name server is the third parameter passed in the instantiated paging class in the controller. Click on the template every time page, this js method server(p) will be triggered, and what page number is passed in it.
$p=new \Think\AjaxPage($count,4,'server');
What is used here is the .get form of the ajax method in jQuery to communicate between ajax and the background. To get the returned data, use the replaceWith method, and use
<div id='server'>+数据</div>
to replace the id of server in the template. p, to achieve paging effect.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
