1. 程式人生 > >topjui/easyui 表格分頁簡單例項

topjui/easyui 表格分頁簡單例項

$('#dg').datagrid({

rownumbers:true, //行號

singleSelect:true, //單選

autoRowHeight:false, //自動行高

pagination:true, //顯示錶格下面的分頁外掛

fitColumns:true, //欄位自動分配

collapsible:true, //表單收縮

checkOnSelect : false,

toolbar:'#tb', //顯示錶格上面的搜尋框等,這些按鈕在tb這個div裡

url:'${ctx}/....',//表格資料的請求路徑(由後臺提供;注意是裡面有rows的陣列,帶total的物件資料,否則無法直接顯示,大家模擬資料的時候要注意)

pageNumber:1, //預設顯示第幾頁

pageSize: 2,//每頁顯示的記錄條數,預設為10

pageList: [2,4,6,8],//可以設定每頁記錄條數的列表

columns:[[

{field:'id',title:'名稱',hidden:true},

{field:'opr',title: '操作',align: 'center',width:'25%',

  formatter:function(value,row,index){//格式化

     if(row.id) {//條件根據實際情況修改

        return

             "&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' onclick='modify(\""+ row.id +"\",\""+index+"\")'>修改</a>"+

             "&nbsp;&nbsp;&nbsp;&nbsp;<a href='#' onclick='del(\""+ row.id +"\",\""+index+"\")'>刪除</a>";

        }

     }

  }

}]]

});

//設定分頁控制元件

var p = $('#dg').datagrid('getPager');

$(p).pagination({

beforePageText: '第',//頁數文字框前顯示的漢字

afterPageText: '頁 共 {pages} 頁',

displayMsg: '當前顯示 {from} - {to} 條記錄 共 {total} 條記錄',

});

//如果前端要模擬資料怎麼辦,json資料就是這個樣子

{

"rows": [

{"id":1,"opr": 1},

{"id":2,"opr": 2},

...

],

"total": 100

}