javascript - 如何?ajax和js的無重新整理分頁效果

實現ajax資料請求的分頁效果：類似圖片上！代碼如何?

回複內容：

實現ajax資料請求的分頁效果：類似圖片上！代碼如何?

ajax請求某一頁的資料，然後把表格清空，然後把新資料群組成表格塞回去。

1.css做出分頁樣式；
2.監聽事件，傳遞分頁參數pageNo，在ajax回調裡面寫列表的重新拼裝和渲染。

思路就是觸發分頁事件的時候進行一次ajax請求，成功後更新表格就行了：

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('');}

當點擊頁碼時：

• 前端傳值： currentPage(當前請求第幾頁)，perPage(每頁多少條資料);

• 後端傳回值： pages(總共頁數)，data(返回資料)；

• 前端在第一次請求資料的時候根據後端返回的總頁數，展示到前端翻頁欄；若是未使用資料繫結，如react，vue，knockout等，下次請求時將表哥清空再迴圈插入html即可，若是使用了資料繫結則只需重新設定返回的資料即可重新渲染頁面。

覺得題主應該掌握四點知識：

1. ajax

2. php的分頁技術

3. mysql的limit

4. jquery

詳解：

1. ajax 點擊頁碼的時候觸發一個click(jQuery)事件，然後擷取到這個頁碼的值，發送到後端

2. php接收到這個頁碼的參數，根據當前頁碼和顯示條數進行計算

$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;

       4.前端其他清單內容對應的div即可。

這是老方法，不知道最新的方法是怎樣的。

以上。對了，這樣的問題百度一大把資源。真的，不騙你。

ajax用法請查api
至於無重新整理分頁,你只要把table地區內的資料,清空並替換即可,題主看看jquery,基本就能實現了,很簡單...

