Kata Pengantar
Kelas paging yang disertakan dengan rangka kerja thinkphp ialah untuk membelek halaman setiap kali Keseluruhan halaman perlu dimuat semula Pengalaman pengguna membalik halaman ini jelas sekali tidak sesuai mahu. Dengan cara ini, kita boleh dengan mudah memikirkan komunikasi asynchronous ajax, menggunakan ajax Asynchronous berinteraksi dengan pangkalan data (saya menggunakan pangkalan data mysql semasa proses pembangunan), mengembalikan data yang ditanya daripada pangkalan data, menggantikan data asal dengan jquery, dan melaksanakan muat semula separa tanpa menyegarkan halaman, sekali gus mencapai kesan jangkaan kami.
kelas paging thinkphp ajax
Kelas paging ini ialah sumber yang ditemui dalam talian Anda boleh mencipta kelas sedemikian secara langsung dalam thinkphp nama saya di sini ialah 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;
}
}
?>
Langkah khusus
Seterusnya, kami akan melaksanakan kesan paging tidak menyegarkan thinkphp langkah demi langkah bermula dari pengawal.
1. Bahagian pengawal
Ini hanyalah kod teras pengawal.
//实例化数据模型
$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. Bahagian templat
Nama templat: myinfolist.html adalah konsisten dengan templat yang diberikan dalam pengawal di atas.
$res["content"] = $this->fetch('Index/myinfolist')
Oleh kerana bahagian hadapan menggunakan rangka kerja bootstrap, banyak kelas dalam templat ini adalah daripada bootstrap Anda tidak perlu terlalu risau tentang perkara ini .
<!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>
Bahagian 3.js
Langkah ini adalah fokus merealisasikan paging bukan penyegaran ajax Ia menggunakan komunikasi ajax jQuery dan menulis data yang diperoleh melalui interaksi ajax dengan pangkalan data ke templat dan menggantikan set data sebelumnya untuk mencapai tujuan paging.
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>");
});
}
Pelayan nama kaedah ini ialah parameter ketiga yang diluluskan dalam kelas paging instantiated dalam pengawal Setiap kali anda mengklik pada templat untuk membelok halaman, pelayan kaedah js ini akan dicetuskan (p), apakah nombor halaman yang dilalui di dalamnya.
$p=new \Host\Common\AjaxPage($count,10,'server');
Apa yang digunakan di sini ialah bentuk .get kaedah ajax dalam jQuery untuk berkomunikasi antara ajax dan latar belakang Gunakan kaedah replaceWith untuk mendapatkan data yang dikembalikan dan gantikan templat dengan
<p id='user7'>+数据</p>
Id ialah p pelayan untuk mencapai kesan paging.
Ringkasan
Langkah di atas adalah langkah khusus untuk melaksanakan kaedah ajax jQuery termasuk $.ajax, $.get dan $.post kod Dalam program saya, untuk tidak mendedahkan beberapa medan data saya, saya menggantikannya dengan abcd dan membuat pemadaman tertentu Jika terdapat sebarang masalah, saya harap anda boleh membetulkannya dan berkomunikasi dengan lebih lanjut.