Heim Backend-Entwicklung PHP-Tutorial PHP+jquery+ajax implementiert Paging

PHP+jquery+ajax implementiert Paging

Jul 07, 2018 pm 01:54 PM

Dieser Artikel stellt hauptsächlich die Implementierung von Paging mit PHP+jQuery+Ajax vor. Er hat einen gewissen Referenzwert. Jetzt kann ich ihn mit allen teilen, die ihn benötigen

HTML

<div id="list"> 
 <ul></ul> 
</div> 
<div id="pagecount"></div>
Nach dem Login kopieren

CSS

#list{width:680px; height:530px; margin:2px auto; position:relative} 
#list ul li{float:left;width:220px; height:260px; margin:2px} 
#list ul li img{width:220px; height:220px} 
#list ul li p{line-height:22px} 
#pagecount{width:500px; margin:10px auto; text-align:center} 
#pagecount span{margin:4px; font-size:14px} 
#list ul li#loading{width:120px; height:32px; border:1px solid #d3d3d3; 
position:absolute; top:35%; left:42%; text-align:center; background:#f7f7f7 
url(loading.gif) no-repeat 8px 8px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2); 
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);}
Nach dem Login kopieren

jQuery

Wir deklarieren zuerst die Variablen und die folgenden Variablen werden im nachfolgenden Code verwendet.

var curPage = 1; //当前页码 
var total,pageSize,totalPage; //总记录数,每页显示数,总页数
Nach dem Login kopieren

Als nächstes passen wir eine Funktion an: getData(), um die aktuellen Seitendaten abzurufen. In der Funktion verwenden wir $.ajax(), um eine asynchrone POST-Anfrage an den Hintergrund page.php zu senden und die aktuelle Seitennummer im JSON-Format an den Hintergrund zu übergeben.

//获取数据 function getData(page){ 
 $.ajax({ 
 type: &#39;POST&#39;, 
 url: &#39;pages.php&#39;, 
 data: {&#39;pageNum&#39;:page-1}, 
 dataType:&#39;json&#39;, 
 beforeSend:function(){ 
 $("#list ul").append("<li id=&#39;loading&#39;>loading...</li>");//显示加载动画  }, 
 success:function(json){ 
 $("#list ul").empty();//清空数据区 
 total = json.total; //总记录数 
 pageSize = json.pageSize; //每页显示条数 
 curPage = page; //当前页 
 totalPage = json.totalPage; //总页数 
 var li = ""; 
 var list = json.list; 
 $.each(list,function(index,array){ //遍历json数据列 
 li += "<li><a href=&#39;#&#39;><img src=&#39;"+array[&#39;pic&#39;]+"&#39;>"+array[&#39;title&#39;] 
 +"</a></li>"; 
 }); 
 $("#list ul").append(li); 
 }, 
 complete:function(){ //生成分页条  getPageBar();
          
            当点击分页条中的分页链接时,调用getData(page)加载对应页码的数据。   
            $("#pagecount span a").on(&#39;click&#39;,function(){ 
        var rel = $(this).attr("rel"); 
       if(rel){ 
      getData(rel); 
       } 
          }); 
   }, 
 error:function(){ 
 alert("数据加载失败"); 
 } 
 }); 
}
Nach dem Login kopieren

Nachdem die Anfrage erfolgreich war, werden die Daten zurückgegeben, die entsprechenden Daten werden an die Variable angehängt und die zurückgegebene Produktdatenliste wird in einer Schleife zum entsprechenden Container #list ul angezeigt. Wenn die Daten vollständig geladen sind, rufen Sie die Seitenleistenfunktion getPageBar() auf, um eine Seitenleiste zu generieren.

//获取分页条 function getPageBar(){ 
 //页码大于最大页数 
 if(curPage>totalPage) curPage=totalPage; 
 //页码小于1 
 if(curPage<1) curPage=1; 
 pageStr = "<span>共"+total+"条</span><span>"+curPage 
 +"/"+totalPage+"</span>"; 
   
 //如果是第一页 
 if(curPage==1){ 
 pageStr += "<span>首页</span><span>上一页</span>"; 
 }else{ 
 pageStr += "<span><a href=&#39;javascript:void(0)&#39; rel=&#39;1&#39;>首页</a></span> 
 <span><a href=&#39;javascript:void(0)&#39; rel=&#39;"+(curPage-1)+"&#39;>上一页</a></span>"; 
 } 
   
 //如果是最后页 
 if(curPage>=totalPage){ 
 pageStr += "<span>下一页</span><span>尾页</span>"; 
 }else{ 
 pageStr += "<span><a href=&#39;javascript:void(0)&#39; rel=&#39;"+(parseInt(curPage)+1)+"&#39;> 
 下一页</a></span><span><a href=&#39;javascript:void(0)&#39; rel=&#39;"+totalPage+"&#39;>尾页</a>  
 </span>"; 
 } 
   
 $("#pagecount").html(pageStr); 
}
Nach dem Login kopieren

Wenn die Seite zum ersten Mal geladen wird, laden wir schließlich die erste Datenseite, nämlich getData(1),

$(function(){  
 getData(1); 
   
});
Nach dem Login kopieren

PHP

pages.php empfängt jede Ajax-Anfrage für die Front-End-Seite, ruft Daten aus der MySQL-Datenbank basierend auf dem übermittelten Seitenzahl-PageNum-Wert ab, berechnet die Gesamtzahl der Datensätze und die Gesamtseitenzahl und liest die entsprechende Datenliste Seitenzahl und formatiert das Endergebnis im JSON-Format. Kehren Sie zur Front-End-Seite zurück.

include_once(&#39;connect.php&#39;); //连接数据库,略过,具体请下载源码查看   
  $page = intval($_POST[&#39;pageNum&#39;]); //当前页    $result = mysql_query("select id from food"); 
$total = mysql_num_rows($result);//总记录数 $pageSize = 6; //每页显示数 $totalPage = ceil($total/$pageSize); //总页数 
   $startPage = $page*$pageSize; //开始记录 //构造数组 $arr[&#39;total&#39;] = $total; 
$arr[&#39;pageSize&#39;] = $pageSize; 
$arr[&#39;totalPage&#39;] = $totalPage; 
$query = mysql_query("select id,title,pic from food order by id asc limit  
$startPage,$pageSize"); //查询分页数据 while($row=mysql_fetch_array($query)){ 
 $arr[&#39;list&#39;][] = array( 
 &#39;id&#39; => $row[&#39;id&#39;], 
 &#39;title&#39; => $row[&#39;title&#39;], 
 &#39;pic&#39; => $row[&#39;pic&#39;], 
 ); 
} 
echo json_encode($arr); //输出JSON数据
Nach dem Login kopieren

Fügen Sie zum Schluss die MySQL-Tabellenstruktur hinzu

CREATE TABLE IF NOT EXISTS `food` ( 
 `id` int(11) NOT NULL AUTO_INCREMENT,  
 `title` varchar(100) NOT NULL, 
 `pic` varchar(255) NOT NULL, 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist die chinesische PHP-Website!

Verwandte Empfehlungen:

Cropper+PHP+Ajax implementiert das Hochladen von Avataren

PHP implementiert die Socket-Push-Technologie

Das obige ist der detaillierte Inhalt vonPHP+jquery+ajax implementiert Paging. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

11 beste PHP -URL -Shortener -Skripte (kostenlos und Premium) 11 beste PHP -URL -Shortener -Skripte (kostenlos und Premium) Mar 03, 2025 am 10:49 AM

Lange URLs, die oft mit Schlüsselwörtern und Tracking -Parametern überfüllt sind, können Besucher abschrecken. Ein URL -Verkürzungsskript bietet eine Lösung, die präzise Links erstellt, die ideal für soziale Medien und andere Plattformen sind. Diese Skripte sind für einzelne Websites a wertvoll

Einführung in die Instagram -API Einführung in die Instagram -API Mar 02, 2025 am 09:32 AM

Nach seiner hochkarätigen Akquisition durch Facebook im Jahr 2012 nahm Instagram zwei APIs für den Einsatz von Drittanbietern ein. Dies sind die Instagram -Graph -API und die Instagram Basic Display -API. Ein Entwickler, der eine App erstellt, die Informationen von a benötigt

Arbeiten mit Flash -Sitzungsdaten in Laravel Arbeiten mit Flash -Sitzungsdaten in Laravel Mar 12, 2025 pm 05:08 PM

Laravel vereinfacht die Behandlung von temporären Sitzungsdaten mithilfe seiner intuitiven Flash -Methoden. Dies ist perfekt zum Anzeigen von kurzen Nachrichten, Warnungen oder Benachrichtigungen in Ihrer Anwendung. Die Daten bestehen nur für die nachfolgende Anfrage standardmäßig: $ Anfrage-

Erstellen Sie eine React -App mit einem Laravel -Back -Ende: Teil 2, reagieren Erstellen Sie eine React -App mit einem Laravel -Back -Ende: Teil 2, reagieren Mar 04, 2025 am 09:33 AM

Dies ist der zweite und letzte Teil der Serie zum Aufbau einer Reaktionsanwendung mit einem Laravel-Back-End. Im ersten Teil der Serie haben wir eine erholsame API erstellt, die Laravel für eine grundlegende Produktlistenanwendung unter Verwendung von Laravel erstellt hat. In diesem Tutorial werden wir Dev sein

Vereinfachte HTTP -Reaktion verspottet in Laravel -Tests Vereinfachte HTTP -Reaktion verspottet in Laravel -Tests Mar 12, 2025 pm 05:09 PM

Laravel bietet eine kurze HTTP -Antwortsimulationssyntax und vereinfache HTTP -Interaktionstests. Dieser Ansatz reduziert die Code -Redundanz erheblich, während Ihre Testsimulation intuitiver wird. Die grundlegende Implementierung bietet eine Vielzahl von Verknüpfungen zum Antworttyp: Verwenden Sie Illuminate \ Support \ facades \ http; Http :: fake ([ 'Google.com' => 'Hallo Welt',, 'github.com' => ['foo' => 'bar'], 'Forge.laravel.com' =>

Curl in PHP: So verwenden Sie die PHP -Curl -Erweiterung in REST -APIs Curl in PHP: So verwenden Sie die PHP -Curl -Erweiterung in REST -APIs Mar 14, 2025 am 11:42 AM

Die PHP Client -URL -Erweiterung (CURL) ist ein leistungsstarkes Tool für Entwickler, das eine nahtlose Interaktion mit Remote -Servern und REST -APIs ermöglicht. Durch die Nutzung von Libcurl, einer angesehenen Bibliothek mit Multi-Protokoll-Dateien, erleichtert PHP Curl effiziente Execu

12 Beste PHP -Chat -Skripte auf Codecanyon 12 Beste PHP -Chat -Skripte auf Codecanyon Mar 13, 2025 pm 12:08 PM

Möchten Sie den dringlichsten Problemen Ihrer Kunden in Echtzeit und Sofortlösungen anbieten? Mit Live-Chat können Sie Echtzeitgespräche mit Kunden führen und ihre Probleme sofort lösen. Sie ermöglichen es Ihnen, Ihrem Brauch einen schnelleren Service zu bieten

Ankündigung von 2025 PHP Situation Survey Ankündigung von 2025 PHP Situation Survey Mar 03, 2025 pm 04:20 PM

Die 2025 PHP Landscape Survey untersucht die aktuellen PHP -Entwicklungstrends. Es untersucht Framework -Nutzung, Bereitstellungsmethoden und Herausforderungen, die darauf abzielen, Entwicklern und Unternehmen Einblicke zu geben. Die Umfrage erwartet das Wachstum der modernen PHP -Versio

See all articles