ThinkPHP 整合 jQuery EasyUI Datagrid 分頁：解決點擊下一頁不刷新數據的參數名衝突問題

問題現象

EasyUI Datagrid 首頁加載正常，點擊分頁條「下一頁」請求發出，但返回數據仍為第一頁，頁碼不變。

根因：參數名不匹配

EasyUI Datagrid 內置分頁組件發送請求參數名為 page 和 rows。你的 JS 代碼中手動重寫了 pagination 的 onSelectPage，調用 $('#list0').datagrid('reload', {page: pageNumber, rows: pageSize})，但 reload 參數不會覆蓋內置分頁的查詢參數，導致實際發送的請求仍攜帶內置生成的 page=1。

解決方案（三選一）

方案一：使用內置分頁，僅本地化語言包（最簡單、推薦）

<script type="text/javascript" src="../../jquery.easyui.min.js"></script>
<script type="text/javascript" src="../../locale/easyui-lang-zh_CN.js" charset="utf-8"></script>

$('#list0').datagrid({
    url: 'read.action', // ThinkPHP 控制器方法
    pagination: true,   // 開啟內置分頁
    pageSize: 10,
    pageList: [10,20,30,50],
    // 無需手寫 onSelectPage、pagination 配置
});

ThinkPHP 後端直接讀取 $_POST['page']、$_POST['rows'] 即可。

方案二：自定義參數名，後端配合修改

若堅持手動控制分頁，需避開內置參數名：

// JS
$('#list0').datagrid('reload', {
    pagenum: pageNumber,  // 改名
    pagesize: pageSize
});

// ThinkPHP read() 方法
$pagenum = isset($_POST['pagenum']) ? intval($_POST['pagenum']) : 1;
$pagesize = isset($_POST['pagesize']) ? intval($_POST['pagesize']) : 10;

方案三：銷毀重建 Datagrid（不推薦，體驗差）

onSelectPage: function(pageNumber, pageSize) {
    $('#list0').datagrid('destroy');
    $('#list0').datagrid({
        url: 'read.action',
        queryParams: {page: pageNumber, rows: pageSize},
        pagination: true,
        pageNumber: pageNumber,
        pageSize: pageSize
    });
}

ThinkPHP 後端標準分頁代碼

public function read() {
    $supplier = M('Supplier');
    $pagenum = I('post.page/d', 1);      // 自動類型轉換、默認值
    $pagesize = I('post.rows/d', 10);
    $map = [];
    if (I('post.keyword')) {
        $map['name'] = ['like', '%' . I('post.keyword') . '%'];
    }
    $list = $supplier->where($map)
        ->page($pagenum, $pagesize)   // ThinkPHP 內置 page 方法
        ->order('ctime')
        ->select();
    $total = $supplier->where($map)->count();
    $this->ajaxReturn(['total' => $total, 'rows' => $list]); // 自動 JSON 輸出
}

避坑清單

• 確保返回 JSON 格式為 {"total": 100, "rows": [...]}，total 必須為總記錄數，非當前頁數量。
• 不要在 queryParams 中硬編碼 page:1，會覆蓋分頁組件發送的動態值。
• 開啟瀏覽器開發者工具 Network 面板，對比「首次加載」與「點擊下一頁」的 Request Payload，確認 page 參數是否正確遞增。