javascript - So erzielen Sie den Paging-Effekt ohne Aktualisierung von Ajax und JS

Implementieren Sie den Paging-Effekt der Ajax-Datenanforderung: ähnlich dem Bild! So implementieren Sie den Code

Antwortinhalt:

Implementieren Sie den Paging-Effekt der Ajax-Datenanforderung: ähnlich dem Bild! So implementieren Sie den Code

Ajax fordert die Daten einer bestimmten Seite an, löscht dann die Tabelle und fügt dann die neuen Daten in die Tabelle ein.

1. Paging-Stil mit CSS erstellen;

Die Idee besteht darin, eine Ajax-Anfrage zu stellen, wenn das Paging-Ereignis ausgelöst wird, und dann die Tabelle nach Erfolg zu aktualisieren:

<code>ele.onclick = function() {  //假设ele是点击后触发分页的元素
    var index = ele.pageIndex;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'URL', true);//URL应包含分页信息，比如pageIndex，pageSize等
    xhr.onreadystatechange = function() {
        if ( xhr.status == 200 && xhr.readyState == 4 ) {
            updateTable(xhr.responseText);  //这个updateTable就是你用来更新表格的方法，在本页面执行，不会刷新
        }
    }
    xhr.send('');
}</code>

Beim Klicken auf die Seitenzahl:

• Front-End-übergebene Werte: currentPage (welche Seite derzeit angefordert wird), perPage (wie viele Daten pro Seite);

• Backend-Rückgabewert: Seiten (Gesamtzahl der Seiten), Daten (zurückgegebene Daten);

• Wenn das Front-End zum ersten Mal Daten anfordert, werden diese auf der Seitenwechselleiste des Front-Ends basierend auf der Gesamtzahl der vom Back-End zurückgegebenen Seiten angezeigt, sofern keine Datenbindung verwendet wird B. „React“, „Vue“, „Knockout“ usw., wird bei der nächsten Anforderung einfach der Cousin gelöscht und in einer Schleife in den HTML-Code eingefügt. Wenn Sie die Datenbindung verwenden, müssen Sie nur die zurückgegebenen Daten zurücksetzen, um die Seite erneut zu rendern .

Ich denke, der Fragesteller sollte vier Wissenspunkte beherrschen:

1. Ajax

2. PHP-Paging-Technologie

3. MySQL-Limit

4. jquery

Detaillierte Erklärung:

1. Wenn auf eine Seitenzahl geklickt wird, wird ein ajax(click)-Ereignis ausgelöst, und dann wird der Wert der Seitenzahl abgerufen und an das Backend gesendet jQuery

2. php empfängt den Parameter dieser Seitenzahl und berechnet ihn basierend auf der aktuellen Seitenzahl und der Anzahl der angezeigten Elemente

<code>$page = $_GET['page'];  //当前页码
$page_num = 12;         //显示条数
$offect = $page_num * ( $page - 1 );    

$sql = "select * from table limit $offset,$page_num";  //3、sql的limit语法

//组装成html返回给前台


echo $html;exit;

</code>

4. Das Frontend kann das Div ersetzen, das dem Listeninhalt entspricht.

Dies ist eine alte Methode, ich weiß nicht, was die neueste Methode ist.

Oben. Übrigens verfügt Baidu über viele Ressourcen für diese Art von Problemen.

Wirklich, ich werde dich nicht anlügen.

Bitte überprüfen Sie die API auf Ajax-Nutzung.

Beim Paging ohne Aktualisierung müssen Sie nur die Daten im Tabellenbereich löschen und ersetzen einfach...