Heim > Web-Frontend > js-Tutorial > Hauptteil

So implementieren Sie die Paging-Funktion mit jquery+ajax

php中世界最好的语言
Freigeben: 2018-04-23 16:58:18
Original
3102 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie die Paging-Funktion mit jquery+ajax implementieren. Was sind die Vorsichtsmaßnahmen für jquery+ajax, um die Paging-Funktion zu implementieren? .

HTML

<p id="list"> 
 <ul></ul> 
</p> 
<p id="pagecount"></p>
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 verwenden sie im Folgenden Code, der Variablen folgt.

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

Als nächstes definieren wir eine Funktion aus : getData(), um die aktuellen Seitendaten zu erhalten. 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: 'POST', 
 url: 'pages.php', 
 data: {'pageNum':page-1}, 
 dataType:'json', 
 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['title'] 
 +"</a></li>"; 
 }); 
 $("#list ul").append(li); 
 }, 
 complete:function(){ //生成分页条 
 getPageBar();
          
            当点击分页条中的分页链接时,调用getData(page)加载对应页码的数据。  
            $("#pagecount span a").on('click',function(){ 
        var rel = $(this).attr("rel"); 
       if(rel){ 
      getData(rel); 
       } 
          }); 
   }, 
 error:function(){ 
 alert("数据加载失败"); 
 } 
 }); 
}
Nach dem Login kopieren

Nach erfolgreicher Anforderung 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 schließlich zum ersten Mal geladen wird, laden wir 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 Frontend-Seite, ruft Daten aus der MySQL-Datenbank basierend auf dem übermittelten Seitenzahl-PageNum-Wert ab, berechnet die Gesamtzahl der Datensätze und Gesamtseitenzahl, liest die entsprechende Seitenzahl-Datenliste und gibt das Endergebnis im JSON-Format an die Front-End-Seite zurück.

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

Zum Schluss die MySQL-Tabellenstruktur anhängen

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

Wunderbare Themenfreigabe: JQuery-Paging-Funktionsbetrieb JavaScript-Paging-Funktionsbetrieb

Glauben Sie Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung des HTML-Element-Klickereignisses der jQuery-Operation

text() val() und html in jQuery Was sind die Unterschiede in der Verwendung von ()

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Paging-Funktion mit jquery+ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage