Heim >PHP-Framework >Denken Sie an PHP >Bringen Sie Ihnen Schritt für Schritt bei, wie Sie die Thinkphp-Ajax-Paginierung ohne Aktualisierung implementieren

Bringen Sie Ihnen Schritt für Schritt bei, wie Sie die Thinkphp-Ajax-Paginierung ohne Aktualisierung implementieren

藏色散人
藏色散人nach vorne
2021-09-20 16:59:461761Durchsuche

In der folgenden Tutorial-Kolumne zum thinkphp-Framework erfahren Sie, wie Sie das Ajax-Non-Refresh-Paging von thinkphp implementieren. Ich hoffe, dass es für Freunde in Not hilfreich sein wird!

Vorwort

Die mit dem thinkphp-Framework gelieferte Paging-Klasse erfordert bei jedem Umblättern eine Aktualisierung der gesamten Seite Offensichtlich nicht sehr gut. Im Idealfall hoffen wir, dass wir jedes Mal, wenn wir umblättern, nur die Daten in dem Teil des Datensatzes aktualisieren, den wir möchten. Auf diese Weise können wir uns leicht eine asynchrone Ajax-Kommunikation vorstellen und Ajax für die asynchrone Interaktion verwenden Die Datenbank (ich verwende die MySQL-Datenbank während des Entwicklungsprozesses) und Die von der Datenbank abgefragten Daten werden zurückgegeben und die Originaldaten durch jquery ersetzt, sodass eine teilweise Aktualisierung durchgeführt werden kann, ohne die Seite zu aktualisieren, wodurch der gewünschte Effekt erzielt wird.

Thinkphp-Ajax-Paging-Klasse

Diese Paging-Klasse ist eine Online-Ressource. Sie können eine solche Klasse direkt in Ihrem eigenen Thinkphp erstellen. Mein Klassenname lautet hier AjaxPage.class.php. Spezifische Schritte. Als nächstes beginnen wir vom Controller und implementieren Sie Schritt für Schritt den Effekt des nicht aktualisierenden Thinkphp-Pagings.

1. Controller-Teil

Dies ist nur der Kerncode des Controller-Teils.

<?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=&#39;ajaxify&#39; id=&#39;big&#39; href=&#39;JavaScript:".$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:".$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:".$this->ajax_func."(".$preRow.")'>上".$this->rollPage."页</a>";
            $theFirst = "<a class=&#39;ajaxify&#39; id=&#39;big&#39; href=&#39;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=&#39;ajaxify&#39; id=&#39;big&#39; href=&#39;javascript:".$this->ajax_func."(".$nextRow.")' >下".$this->rollPage."页</a>";
            $theEnd = "<a class=&#39;ajaxify&#39; id=&#39;big&#39; href=&#39;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=&#39;ajaxify&#39; id=&#39;big&#39; href=&#39;javascript:".$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;
    }

}

?>
2. Vorlagenteil

Vorlagenname: 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-Teil

Dieser 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=&#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>
                        //分页信息
                        <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=&#39;user7&#39;>"
             +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.

Zusammenfassung

Die 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.

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen Schritt für Schritt bei, wie Sie die Thinkphp-Ajax-Paginierung ohne Aktualisierung implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:segmentfault.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen