Penjelasan terperinci tentang paging tidak menyegarkan ajax beberapa kandungan di bawah thinkphp-ThinkPHP-php.cn

Lajur tutorial thinkphp berikut akan memperkenalkan kepada anda paging tidak menyegarkan ajax sebahagian daripada kandungan halaman di bawah thinkphp. Saya harap ia akan membantu rakan yang memerlukan!

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

<?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(&#39;header&#39;=>'条记录','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=&#39;ajaxify&#39; id=&#39;big&#39; href=&#39;JavaScript:;&#39; onclick=&#39;".$this->ajax_func."(".$upRow.")'>".$this->config['prev']."</a>";
    }else{
        $upPage="";
    }

    if ($downRow <= $this->totalPages){
        $downPage="<a class=&#39;ajaxify&#39; id=&#39;big&#39; href=&#39;JavaScript:;&#39; onclick=&#39;".$this->ajax_func."(".$downRow.")'>".$this->config['next']."</a>";
    }else{
        $downPage="";
    }
    // << < > >>
    if($nowCoolPage == 1){
        $theFirst = "";
        $prePage = "";
    }else{
        $preRow =  $this->nowPage-$this->rollPage;
        $prePage = "<a class=&#39;ajaxify&#39; id=&#39;big&#39; href=&#39;JavaScript:;&#39; onclick=&#39;".$this->ajax_func."(".$preRow.")'>上".$this->rollPage."页</a>";
        $theFirst = "<a class=&#39;ajaxify&#39; id=&#39;big&#39; href=&#39;JavaScript:;&#39; onclick=&#39;".$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=&#39;ajaxify&#39; id=&#39;big&#39; href=&#39;JavaScript:;&#39; onclick=&#39;".$this->ajax_func."(".$nextRow.")' >下".$this->rollPage."页</a>";
        $theEnd = "<a class=&#39;ajaxify&#39; id=&#39;big&#39; href=&#39;JavaScript:;&#39; onclick=&#39;".$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=&#39;ajaxify&#39; id=&#39;big&#39; href=&#39;JavaScript:;&#39; onclick=&#39;".$this->ajax_func."(".$page.")'> ".$page." </a>";
            }else{
                break;
            }
        }else{
            if($this->totalPages != 1){
                $linkPage .= " <span class=&#39;current&#39;>".$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;
}

}

Salin selepas log masuk

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)

<?php
namespace Home\Controller;
use Think\Controller;
class IndexController extends Controller {
    public function index(){
        $info=M(&#39;info&#39;);
        //统计要查询数据的数量
        $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);
    }
}

Salin selepas log masuk

2. Templat
templat lajur index.html

Antaranya, templat yang dirujuk ialah bahagian kandungan yang perlu dinomborkan

<!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=&#39;server&#39;>"
             +data.content+
             "</p>"); 
        });
    }
</script> 
<script src="__PUBLIC__/jq/jquery1.8.3.min.js"></script>
</html>

Salin selepas log masuk

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=&#39;list&#39; item=&#39;info&#39;>
                                        <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>

Salin selepas log masuk

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

 <script>
    function server(pid){  
        var pid = pid;
        $.get("{:U(&#39;Index/page&#39;)}", "p="+pid, function(data){  
             $("#server").replaceWith("<p  id=&#39;server&#39;>"
             +data.content+
             "</p>"); 
        });
    }
</script>

Salin selepas log masuk

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,&#39;server&#39;);

Salin selepas log masuk

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=&#39;server&#39;>+数据</div>

Salin selepas log masuk

Id ialah p pelayan untuk mencapai kesan paging.

Atas ialah kandungan terperinci Penjelasan terperinci tentang paging tidak menyegarkan ajax beberapa kandungan di bawah thinkphp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!