javascript - 如何實現ajax和js的無刷新分頁效果

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

回覆內容：

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

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

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

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

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

當點擊頁碼時：

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

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

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

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

1. ajax

2. php的分頁技術

3. mysql的limit

4. jquery

詳解：

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

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

<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.前端取代清單內容對應的div即可。

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

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

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