Kelas paging yang disertakan dengan kerangka thinkphp memerlukan muat semula keseluruhan halaman setiap kali anda membuka halaman, pengalaman pengguna yang mengubah halaman ini jelas tidak sesuai mudah memikirkan komunikasi asynchronous ajax, menggunakan ajax untuk berkomunikasi dengan pangkalan data (Saya sedang membangunkan Proses menggunakan pangkalan data mysql) interaksi tak segerak, mengembalikan data yang ditanya daripada pangkalan data, menggantikan data asal dengan jquery, dan melakukan penyegaran separa tanpa menyegarkan halaman , dengan itu mencapai kesan yang diingini.
kelas paging thinkphp ajax
Kelas paging ini ialah sumber yang terdapat dalam talian Anda boleh mencipta kelas sedemikian secara langsung dalam thinkphp anda sendiri. Nama kelas di sini ialah AjaxPage.class.php, seperti Jika perlu, anda boleh mengubah suai ruang nama
1f87a0dc59f026a747ee557226eb4900'条记录','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="4c6ddcfa986b1cfd4b100c516dd444ceajax_func."(".$upRow.")'>".$this->config['prev']."5db79b134e9f6b82c0b36e0489ee08ed"; }else{ $upPage=""; } if ($downRow 8aa9cd03f13872f1c27a1dd7dc85aa49totalPages){ $downPage="4c6ddcfa986b1cfd4b100c516dd444ceajax_func."(".$downRow.")'>".$this->config['next']."5db79b134e9f6b82c0b36e0489ee08ed"; }else{ $downPage=""; } // 5e91ac722550d2d65fc65c3024cfc1f6 >> if($nowCoolPage == 1){ $theFirst = ""; $prePage = ""; }else{ $preRow = $this->nowPage-$this->rollPage; $prePage = "4c6ddcfa986b1cfd4b100c516dd444ceajax_func."(".$preRow.")'>上".$this->rollPage."页5db79b134e9f6b82c0b36e0489ee08ed"; $theFirst = "4c6ddcfa986b1cfd4b100c516dd444ceajax_func."(1)' >".$this->config['first']."5db79b134e9f6b82c0b36e0489ee08ed"; } if($nowCoolPage == $this->coolPages){ $nextPage = ""; $theEnd=""; }else{ $nextRow = $this->nowPage+$this->rollPage; $theEndRow = $this->totalPages; $nextPage = "4c6ddcfa986b1cfd4b100c516dd444ceajax_func."(".$nextRow.")' >下".$this->rollPage."页5db79b134e9f6b82c0b36e0489ee08ed"; $theEnd = "4c6ddcfa986b1cfd4b100c516dd444ceajax_func."(".$theEndRow.")' >".$this->config['last']."5db79b134e9f6b82c0b36e0489ee08ed"; } // 1 2 3 4 5 $linkPage = ""; for($i=1;$i930cdc47afbfa294d5d6bff505cbe3ddrollPage;$i++){ $page=($nowCoolPage-1)*$this->rollPage+$i; if($page!=$this->nowPage){ if($page930cdc47afbfa294d5d6bff505cbe3ddtotalPages){ $linkPage .= " 4c6ddcfa986b1cfd4b100c516dd444ceajax_func."(".$page.")'> ".$page." 5db79b134e9f6b82c0b36e0489ee08ed"; }else{ break; } }else{ if($this->totalPages != 1){ $linkPage .= " c9c3467744b1ee299b813ab65906400d".$page."54bdf357c58b8a65c66d7c19c8e4d114"; } } } $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
1. Pengawal
kini dipaparkan dalam kaedah indeks, kemudian ambil dan ajaxReturn dalam kaedah halaman, di sini Perlu diingatkan bahawa pengambilan adalah halaman rujukan (artikel)
cd43c1cac171b9d5901cb44c2adcb334count(); //实例化分页类,传入三个参数,分别是数据总数、每页显示的数据条数、要调用的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. Templat
templat lajur index.html
Antaranya, templat yang dirujuk ialah bahagian kandungan yang perlu dinomborkan
76c82f278ac045591c9159d381de2c57 100db36a723c770d327fc0aef2ce13b1 93f0f5c25f18dab9d176bd4f6de5d30e 9c3bca370b5104690d9ef395f2c5f8d1 e388a4556c0f65e1904146cc1a846bee hello world 94b3e26ee717c64999d7867364b1b4a3 4826afc8bc0934c5141d6810ee82aa53 3f1c4e4b6b16bbbd69b2ee476dc4f83a function server(pid){ var pid = pid; $.get("{:U('Index/page')}", "p="+pid, function(data){ $("#server").replaceWith("7db81b6f8cec3ce3f482d60b8ae1b72c" +data.content+ "94b3e26ee717c64999d7867364b1b4a3"); }); } 2cacc6d41bbb37262a98f745aa00fbf0 6432ecebf4dfccad7c9cdaa663a4dfcc2cacc6d41bbb37262a98f745aa00fbf0 73a6ac4ed44ffec12cee46588e518a5e
Templat yang memerlukan penomboran
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>
Ini akan memastikan bahawa apabila anda mengklik pada nombor halaman , kandungan di atas kandungan bermuka surat tidak akan dimuatkan sekali lagi, menyebabkan halaman web menjadi kucar-kacir
Bahagian 3.js
Langkah ini ialah fokus merealisasikan paging bukan penyegaran ajax komunikasi ajax jQuery dan menulis data yang diperoleh ke pangkalan data melalui interaksi ajax Dalam templat, gantikan set data sebelumnya untuk mencapai tujuan paging. server.js , boleh ditulis secara dalaman atau luaran, bebas pilih
3f1c4e4b6b16bbbd69b2ee476dc4f83a function server(pid){ var pid = pid; $.get("{:U('Index/page')}", "p="+pid, function(data){ $("#server").replaceWith("7db81b6f8cec3ce3f482d60b8ae1b72c" +data.content+ "94b3e26ee717c64999d7867364b1b4a3"); }); } 2cacc6d41bbb37262a98f745aa00fbf0
Pelayan nama kaedah ini ialah parameter ketiga yang diluluskan dalam kelas paging instantiated dalam pengawal, setiap kali pada templat Mengklik untuk membelok halaman akan mencetuskan pelayan kaedah js ini (p), yang melepasi nombor halaman halaman mana.
$p=new \Think\AjaxPage($count,4,'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
<div id='server'>+数据</div>
Id ialah p pelayan untuk mencapai kesan paging.