$('#tt').datagrid({
    width: document.getElementById('div1').width,
    height: document.getElementById('div1').heigh,
    nowrap: false,
    striped: true,
    collapsible: true,
    remoteSort: false,
    singleSelect: true,
    sortName: 'Id',
    sortOrder: 'desc',
    idField: 'Id',
    url: '/Service/UnAuditedHandler.ashx',
    columns: [[
    { field: 'id', title: '編號', width: $(this).width() * 0.05 },
    { field: 'username', title: '使用者名稱', width: $(this).width() * 0.10 },
    { field: 'mobile', title: '家庭電話', width: $(this).width() * 0.10 },
    { field: 'phone', title: '手機號', width: $(this).width() * 0.10 },
    { field: 'cnname', title: '真實姓名', width: $(this).width() * 0.10 },
    { field: 'gender', title: '性別', width: $(this).width() * 0.05 },
    { field: 'birthday', title: '出生日期', width: $(this).width() * 0.10 },
    { field: 'idcardnumber', title: '身份證號', width: $(this).width() * 0.15 }
    ]],
    onLoadSuccess:function(data){
        if(data.total > 0) return;
        $(this).datagrid('appendRow', { id: '<div style="text-align:center;color:red">沒有相關記錄！</div>' }).datagrid('mergeCells', { index: 0, field: 'id', colspan: 8 });
        //隱藏分頁導航條，這個需要熟悉datagrid的html結構，直接用jquery操作DOM物件，easyui datagrid沒有提供相關方法隱藏導航條
        //$(this).closest('div.datagrid-wrap').find('div.datagrid-pager').hide();
        //如果通過呼叫reload方法重新載入資料有資料時顯示出分頁導航容器
        //$(this).closest('div.datagrid-wrap').find('div.datagrid-pager').show();
    },
    pagination: true,
    pageSize: 15,
    pageList: [15, 25, 50, 100]
});
 

效果如下：

原文地址：http://www.wenotebook.com/Article/Index?articleID=20141024103743