<?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; } } ?>2. VorlagenteilVorlagenname: myinfolist.html stimmt mit der im obigen Controller gerenderten Vorlage überein.
//实例化数据模型 $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);Da das Frontend das Bootstrap-Framework verwendet, stammen viele Klassen in dieser Vorlage von Bootstrap. Sie müssen sich darüber keine großen Gedanken machen.
$res["content"] = $this->fetch('Index/myinfolist')
3.js-TeilDieser Schritt steht im Mittelpunkt der Implementierung von Ajax-Non-Refresh-Paging. Durch die Ajax-Interaktion mit der Datenbank werden die erhaltenen Daten in die Vorlage geschrieben und der vorherige Datensatz ersetzt. , um den Zweck des Pagings zu erreichen. server.js
<!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>
Dieser Methodennamenserver ist der dritte Parameter, der in der instanziierten Paging-Klasse im Controller übergeben wird. Jedes Mal, wenn Sie auf die Vorlage klicken, um die Seite umzublättern, wird dieser js-Methodenserver (p) ausgelöst wird darin übergeben ist Die Seitenzahl der Seite.
function server(id){ var id = id; $.get('/Server/myinfo', {'p':id}, function(data){ //用get方法发送信息到Server中的myinfo方法 $("#server").replaceWith("<p id='user7'>" +data.content+ "</p>"); }); }
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
$p=new \Host\Common\AjaxPage($count,10,'server');, um das p durch die ID von zu ersetzen Server in der Vorlage, um den Paging-Effekt zu erzielen. ZusammenfassungDie oben genannten Schritte sind die spezifischen Schritte zur Implementierung der Ajax-Methoden $.ajax, $.get und $.post. Der Code bleibt in meinem Programm hängen. Um einige meiner Datenfelder nicht öffentlich zu machen, habe ich sie durch abcd ersetzt und bestimmte Löschungen vorgenommen. Wenn es Probleme gibt, hoffe ich, dass Sie mich korrigieren und mehr mitteilen können.