首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
您现在的位置: 程式碼之家 >> 編程語言 >  >> 更多程式語言 >> 程式設計綜合問答

jPages 分頁插件 AJAX 模式下點擊翻頁不請求後端的解決方案

     編輯:程式設計綜合問答

現象

jPages 初始化時獲取所有數據,點擊第 2 頁不發送 AJAX 請求,僅在本地分頁。

原因

jPages 設計為客戶端分頁:一次性拿全量數據,前端切片顯示。不內建服務端分頁 AJAX 能力。

替代方案:jqPaginator + 自定義 AJAX

// 使用 jQuery.jqPaginator
$('#pagination').jqPaginator({
    totalPages: 100, // 總頁數,首次請求獲取
    visiblePages: 5,
    currentPage: 1,
    onPageChange: function (num, type) {
        if (type === 'change') {
            $.ajax({
                url: '/api/list',
                data: { page: num, size: 20 },
                success: function (res) {
                    renderTable(res.data);
                }
            });
        }
    }
});

對比

插件分頁模式適用場景
jPages純前端數據量小(<1000 條),無需 SEO
jqPaginator / laypage服務端配合大數據量、需 SEO、權限控制
  1. 上一篇文章:
  2. 下一篇文章:
Copyright © 程式碼之家 All Rights Reserved