EasyUI添加分頁組件

• • demo

demo

#創建數據網格（DataGrid），設置 ‘pagination’ 屬性為 true，它將在數據網格（datagrid）的底部生成一個分頁（pagination）工具欄。pagination將發送兩個參數到服務器，為了從遠程服務器端加載數據，設置 ‘url’ 屬性， url地址發起ajax請求. 動態的添加分頁的參數.
page：頁碼，起始值 1。
rows：每頁顯示行。
服務器端應該返回 JSON 格式數據。

<table class="easyui-datagrid" id="itemList" title="商品列表" data-options="singleSelect:false,fitColumns:true,collapsible:true,pagination:true,url:'/item/query',method:'get',pageSize:20,toolbar:toolbar"><thead><tr><th data-options="field:'ck',checkbox:true"></th><th data-options="field:'id',width:60">商品ID</th><th data-options="field:'title',width:200">商品標題</th><th data-options="field:'cid',width:100,align:'center',formatter:KindEditorUtil.findItemCatName">葉子類目</th><th data-options="field:'sellPoint',width:100">賣點</th><th data-options="field:'price',width:70,align:'right',formatter:KindEditorUtil.formatPrice">價格</th><th data-options="field:'num',width:70,align:'right'">庫存數量</th><th data-options="field:'barcode',width:100">條形碼</th><th data-options="field:'status',width:60,align:'center',formatter:KindEditorUtil.formatItemStatus">狀態</th><th data-options="field:'created',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">創建日期</th><th data-options="field:'updated',width:130,align:'center',formatter:KindEditorUtil.formatDateTime">更新日期</th></tr></thead> </table>

總結

以上是生活随笔為你收集整理的EasyUI框架分页实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。