jquery implementiert Abfrage-Paging-Front-End-Fragen und Antworten-php.cn

Mit der Entwicklung der IT-Branche werden Webanwendungen immer beliebter. Gerade in den letzten Jahren ist mit der rasanten Entwicklung von Technologien wie mobilem Internet und Big Data auch die Nachfrage nach Webanwendungen gestiegen.

In Webanwendungen ist die Datenabfrage und -anzeige eine der wichtigsten Funktionen. Bei großen Datenmengen ist die Frage, wie Daten schnell und präzise abgefragt und angezeigt werden können, besonders wichtig geworden. Herkömmliches Paging kann die Anforderungen der Benutzer nicht mehr erfüllen, da Paging Daten zur Anzeige nur auf mehrere Seiten aufteilen kann und Benutzer Seiten umblättern müssen, um alle Daten anzuzeigen.

Um den Abfrageeffekt der Benutzer zu verbessern, können wir einige neue Technologien verwenden, um die Abfrage-Paging-Funktion zu implementieren. Unter ihnen ist jQuery ein sehr beliebtes Webentwicklungstool mit starker Interaktivität und Benutzerfreundlichkeit, das uns bei der Implementierung besserer Webanwendungen helfen kann. In diesem Artikel wird erläutert, wie Sie mit jQuery die Abfrage-Paging-Funktion implementieren.

1. Der Bedarf an Abfrage-Paging

Mit zunehmender Datenmenge werden die Abfrageergebnisse immer größer. Wenn Sie alle Daten auf der Seite auf einmal anzeigen möchten, führt dies zu Problemen für Benutzer hinsichtlich der Sprachkompetenz und der Datenerfassung. Bei Anwendungen mit großen Datenmengen besteht eine gängige Methode darin, dieses Problem durch Paging zu lösen.

Die Vorteile von Paging sind:

Verbesserung der Seitenöffnungsgeschwindigkeit und Reduzierung der Serverlast.
Die Anzeige ist übersichtlicher und erleichtert den Benutzern die Anzeige und Bedienung.
Paging kann die erforderlichen Daten genau und schnell abfragen.
Paging kann den Caching-Mechanismus des Browsers nutzen, um den Serverdruck zu verringern und die Datenübertragung zu reduzieren.

Allerdings wird die Website durch gewöhnliches Paging oft langweilig, die Wartezeit beim Herunterladen ist zu lang und die Benutzererfahrung ist nicht gut. Daher ist die Implementierung der Abfrage-Paging-Funktion von entscheidender Bedeutung, wodurch die Abfrageeffizienz und das Benutzererlebnis des Benutzers verbessert werden können.

2. jQuery implementiert Abfrage-Paging

jQuery ist eine JavaScript-Bibliothek, die häufig zur Optimierung und Verarbeitung von JavaScript-Code verwendet wird. Die Methode zur Implementierung von Abfrage-Paging mit jQuery ist relativ einfach und gliedert sich hauptsächlich in die folgenden Schritte:

Implementieren Sie die Datenabfrage und speichern Sie die Abfrageergebnisse in einem Array.
Erzeugen Sie dynamisch Abfrageergebnisseiten, einen Paging-Kontrollbereich und eine Paging-Statusleiste.
Wählen Sie entsprechend der Abfrageanforderung des Benutzers den Datenknoten aus und erstellen Sie dynamisch den Paging-Knoten.
Laden Sie die Paging-Daten neu und aktualisieren Sie die Seite dynamisch entsprechend der Umblätteranforderung des Benutzers.

Im Folgenden stellen wir Ihnen Schritt für Schritt vor, wie Sie mit jQuery die Abfrage-Paging-Funktion implementieren:

Datenabfrage implementieren

Zuerst müssen wir die Daten in einem Array speichern. Für in JavaScript geschriebene Webanwendungen Prozess Sehr einfach. Sie müssen lediglich die JSON-Methode parse() aufrufen, um eine JSON-formatierte Zeichenfolge in ein JavaScript-Objekt zu konvertieren.

Das Folgende ist ein Beispiel:

let jsonData='[{"name":"张三","age":20,"salary":"5000"},{"name":"李四","age":22,"salary":"6000"},{"name":"王五","age":25,"salary":"8000"},{"name":"赵六","age":27,"salary":"9000"},{"name":"钱七","age":30,"salary":"10000"},{"name":"二哈","age":32,"salary":"12000"},{"name":"三哈","age":35,"salary":"15000"},{"name":"四哈","age":37,"salary":"18000"},{"name":"五哈","age":40,"salary":"20000"},{"name":"六哈","age":42,"salary":"22000"}]';

let data=JSON.parse(jsonData);

Nach dem Login kopieren

Dynamische Generierung von Seitenelementen

Die dynamische Generierung von Seitenelementen nutzt die DOM-Operationen in jQuery, hauptsächlich über die Methoden append() und html() in jQuery. Sie können die Methode append() verwenden, um neue Knoten und untergeordnete Knoten hinzuzufügen, und Sie können auch die Methode html() verwenden, um das innerHTML des Knotens zu ändern.

Das Folgende ist ein Beispiel:

//动态添加查询结果区域
let $table=$('<table><thead><tr><th>姓名</th><th>年龄</th><th>薪资</th></tr></thead><tbody></tbody></table>');
$container.append($table);
for(let item of data){
  let $tr=$('<tr><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.salary+'</td></tr>');
  $table.find('tbody').append($tr);
}

//动态添加分页控制区域
let $pagerBox=$('<div class="pager-box"></div>');
let $prePage=$('<a href="javascript:void(0);" class="pre-page">上一页</a>');
let $nextPage=$('<a href="javascript:void(0);" class="next-page">下一页</a>');
$pagerBox.append($prePage);
for(let i=1;i<=data.length;i++){
  let $pageNode=$('<a href="javascript:void(0);" class="pager-num">'+i+'</a>');
  $pagerBox.append($pageNode);
}
$pagerBox.append($nextPage);
$container.append($pagerBox);

//动态添加分页状态条
let $pageStatus=$('<div class="page-status"><span class="current-page">1</span>/<span class="total-page">'+Math.ceil(data.length/pageSize)+'页</span></div>');
$container.append($pageStatus);

//定义页面元素的CSS样式
$container.css({'text-align':'center','background-color':'#f7f7f7'});
$table.css({'width':'90%','margin':'0 auto','background-color':'#fff','border':'1px solid #ddd','border-radius':'5px'});
$table.find('thead th').css({'padding-top':'10px','padding-bottom':'10px','background-color':'#eee'});

$pagerBox.css({'width':'90%','margin':'20px auto','height':'30px','line-height':'30px'});
$pagerBox.find('.pager-num').css({'width':'30px','text-align':'center','background-color':'#fff','border':'1px solid #ddd','border-radius':'3px','margin':'0 5px'});
$pagerBox.find('.pager-num.active').css({'background-color':'#e4393c','color':'#fff'});
$pagerBox.find('.pre-page,.next-page').css({'display':'inline-block','color':'#333','text-decoration':'none','margin':'0 5px'});

$pageStatus.css({'width':'90%','margin':'10px auto','color':'#999','font-size':'14px'});

Nach dem Login kopieren

Erstellen eines Paging-Knotens

Über jQuery können Sie dynamisch einen Paging-Knoten erstellen. Die click()-Methode wird hier verwendet, um den Umblättervorgang des Benutzers zu überwachen.

Hier ist ein Beispiel:

let $pagerNodes=$('.pager-num');
$pagerNodes.eq(0).addClass('active');
$pagerNodes.click(function(){
  let index=$(this).index();
  let start=(index-1)*pageSize;
  let end=index*pageSize;
  let dataArr=data.slice(start,end);
  $table.find('tbody').html('');
  for(let item of dataArr){
    let $tr=$('<tr><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.salary+'</td></tr>');
    $table.find('tbody').append($tr);
  }
  $pagerNodes.removeClass('active');
  $(this).addClass('active');
  $pageStatus.find('.current-page').text(index);
});

Nach dem Login kopieren

Seite aktualisieren

Der letzte Schritt besteht darin, die Seitendaten zu aktualisieren. Wir müssen die Paging-Daten entsprechend der Umblätteranforderung des Benutzers neu laden und die Seite dynamisch aktualisieren. Hier werden die Methoden addClass() und removeClass() verwendet, um die aktuelle Seite hervorzuheben.

Das Folgende ist ein Beispiel:

let currentPage=1;
$prePage.click(function(){
  if(currentPage>1){
    currentPage--;
    let index=currentPage-1;
    let start=index*pageSize;
    let end=(index+1)*pageSize;
    let dataArr=data.slice(start,end);
    $table.find('tbody').html('');
    for(let item of dataArr){
      let $tr=$('<tr><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.salary+'</td></tr>');
      $table.find('tbody').append($tr);
    }
    $pagerNodes.removeClass('active');
    $pagerNodes.eq(currentPage-1).addClass('active');
    $pageStatus.find('.current-page').text(currentPage);
  }
});

$nextPage.click(function(){
  if(currentPage<Math.ceil(data.length/pageSize)){
    currentPage++;
    let index=currentPage-1;
    let start=index*pageSize;
    let end=(index+1)*pageSize;
    let dataArr=data.slice(start,end);
    $table.find('tbody').html('');
    for(let item of dataArr){
      let $tr=$('<tr><td>'+item.name+'</td><td>'+item.age+'</td><td>'+item.salary+'</td></tr>');
      $table.find('tbody').append($tr);
    }
    $pagerNodes.removeClass('active');
    $pagerNodes.eq(currentPage-1).addClass('active');
    $pageStatus.find('.current-page').text(currentPage);
  }
});

Nach dem Login kopieren

3. Zusammenfassung

Abfrage-Paging ist eine der häufigsten Funktionen von Webanwendungen und sehr wichtig bei der Verarbeitung großer Datenmengen. jQuery ist ein sehr beliebtes Webentwicklungstool, mit dem wir Abfrage-Paging-Funktionen einfach implementieren können. Durch die Einleitung dieses Artikels haben wir gelernt, wie man mit jQuery die Abfrage-Paging-Funktion implementiert, die Vorgänge wie Datenabfrage, dynamische Generierung von Seitenelementen, Erstellung von Paging-Knoten und dynamische Seitenaktualisierung umfasst.

Die Verwendung von jQuery zur Implementierung von Abfrage-Paging verbessert nicht nur die Interaktivität und Benutzerfreundlichkeit von Webanwendungen, sondern bietet uns auch mehr Gestaltungsspielraum. In praktischen Anwendungen muss auch die Implementierung der Abfrage-Paging-Funktion entsprechend den tatsächlichen Anforderungen angepasst und optimiert werden. Ich hoffe, dieser Artikel ist für die Leser hilfreich.

Das obige ist der detaillierte Inhalt vonjquery implementiert Abfrage-Paging. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!