關於easyui中datagrid分頁問題--摘

首先datagrid中的pagination屬性設置為true： 如

$('#dg1').datagrid({
    url:"{:U('Rearlogin/ajaxNoticeAll')}",    //請求后台的地址
    fitColumns:true,
    scrollbarSize:0,
    singleSelect:true,
    pagination:true,     //分頁開關
    pageNumber:1,        //初始頁
    rownumbers: true,
    nowrap: false,
    pageSize: 10,     //每頁顯示條數
    pageList: [10, 20, 50, 100, 150, 200],   //每頁顯示條數供選項
    showFooter: true,
    striped : true,    //設置表格奇偶行顏色是否不同
    onSelect:function(rowIndex,rowData){
        $(":radio[name='radio_res'][value='"+rowIndex+"']").prop("checked",true);
    },
    onUnselect:function(rowIndex,rowData){
        $(":radio[name='radio_res'][value='"+rowIndex+"']").prop("checked",false);
    },
    columns:[[
        {field:'ck',title:'',formatter:function(value,rowData,rowIndex){
            return "<input name='radio_res' value='"+rowIndex+"' type='radio'/>";
        }},
        {field:'n_id',title:'ID',sortable:true,width:100},
        {field:'n_title',title:'公告標題',sortable:true,width:100},
        {field:'n_pubdate',title:'發布時間',sortable:true,width:100}
    ]] ,
    toolbar:"#btn"
});

每次會自動傳輸 pageNum和pageSize到你寫的那個URL地址      

后台接收的時候是 page // 當前頁數  和 rows //每頁顯示數目   兩個數

然后根據這兩個數就可以用 MySQL 中的 limit 方法 控制輸出條數    還要得到數據的總條數 total   

兩個數轉換成 json 格式 返回給前台 就可以了。

附上后台返回：

{"total":"11","rows":[{"ID":"1","dtNumber":"ADDFSSA","dtTitle":"00","dtTheme":"演藝秀","dtFitTime":"上午","AddTime":"2014/12/15 15:26:40","operateID":"1"},{"ID":"2","dtNumber":"ADDFSSA","dtTitle":"紐約市徒步游，發現原汁原味的百老匯","dtTheme":"城市之旅","dtFitTime":"全天(白+黑)","AddTime":"2014/12/15 16:05:56","operateID":"2"}.......]} 

 

在后台返回的json中帶上total這個字段,前台設計pageSize后就可以自動識別分頁數據了

 

數據表格屬性（DataGrid Properties）

屬性繼承控制面板，以下是數據表格獨有的屬性。

名稱	類型	描述	默認值
columns	array	數據表格列配置對象，查看列屬性以獲取更多細節。	undefined
frozenColumns	array	跟列屬性一樣，但是這些列固定在左邊，不會滾動。	undefined
fitColumns	boolean	設置為true將自動使列適應表格寬度以防止出現水平滾動。	false
autoRowHeight	boolean	定義設置行的高度，根據該行的內容。設置為false可以提高負載性能。	true
toolbar	array,selector	數據表格頂部面板的工具欄。可能的值： 1）數組，每個工具選項和鏈接按鈕相同。 2）選擇顯示的工具欄。 在一個<div>的標簽定義工具欄: $('#dg').datagrid({ toolbar: '#tb' }); <div id="tb"> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-edit',plain:true"/a> <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true"/a> </div> 通過數組定義工具欄: $('#dg').datagrid({ toolbar: [{ iconCls: 'icon-edit', handler: function(){alert('edit')} },'-',{ iconCls: 'icon-help', handler: function(){alert('help')} }] });	null
striped	boolean	設置為true將交替顯示行背景。	false
method	string	請求遠程數據的方法類型。	post
nowrap	boolean	設置為true，當數據長度超出列寬時將會自動截取。	true
idField	string	表明該列是一個唯一列。	null
url	string	一個用以從遠程站點請求數據的超鏈接地址。	null
loadMsg	string	當從遠程站點載入數據時，顯示的一條快捷信息。	Processing, please wait …
pagination	boolean	設置true將在數據表格底部顯示分頁工具欄。	false
rownumbers	boolean	設置為true將顯示行數。	false
singleSelect	boolean	設置為true將只允許選擇一行。	false
checkOnSelect	boolean	如果為true，該復選框被選中/取消選中，當用戶點擊某一行上。如果為false，該復選框僅檢查/取消選中，當用戶點擊完全的復選框。 此屬性是1.3版本。	true
selectOnCheck	boolean	如果設置為true，單擊一個復選框，將始終選擇行。如果為false，不會選擇行選中該復選框。 此屬性是1.3版本。	true
pagePosition	string	定義的分頁欄的位置。可用的值有 'top','bottom','both'。 此屬性是可自1.3版本。	bottom
pageNumber	number	當設置分頁屬性時，初始化分頁碼。	1
pageSize	number	當設置分頁屬性時，初始化每頁記錄數。	10
pageList	array	當設置分頁屬性時，初始化每頁記錄數列表。	[10,20,30,40,50]
queryParams	object	當請求遠程數據時，發送的額外參數。 示例: $('#dg').datagrid({ queryParams: { name: 'easyui', subject: 'datagrid' } });	{}
sortName	string	當數據表格初始化時以哪一列來排序。	null
sortOrder	string	定義排序順序，可以是'asc'或者'desc'（正序或者倒序）。	asc
remoteSort	boolean	定義是否通過遠程服務器對數據排序。	true
showFooter	boolean	定義是否顯示行底（如果是做統計表格，這里可以顯示總計等）。	false
rowStyler	function	返回樣式，如：'background:red'，function有2個參數： index：行索引，從0開始. row：對應於該行記錄的對象。 示例: $('#dg').datagrid({ rowStyler: function(index,row){ if (row.listprice>80){ return 'background-color:#6293BB;color:#fff;'; } } });
loader	function	定義如何從遠程服務器加載數據。返回false可以取消該操作。這個函數接受以下參數： param: 參數對象傳遞到遠程服務器。 success(data): 回調函數將被調用成功檢索的數據。 error():回調函數將被調用失敗時檢索數據。	json loader
loadFilter	function	返回過濾的數據顯示。該函數需要一個參數'data'，表示原始數據。您可以更改源數據的標准數據格式。此函數必須返回標准數據對象中包含的“total”和“rows”的屬性。 示例: // removing 'd' object from asp.net web service json output $('#dg').datagrid({ loadFilter: function(data){ if (data.d){ return data.d; } else { return data; } } });
editors	object	定義當編輯一行時的編輯模式。	predefined editors
view	object	定義數據表格的視圖。	default view

 

列屬性（Column Properties）

數據表格的列是一個對象數組，即這個對象中的元素也是一個數組（js中數組是對象）。 對象數組中的每一個元素都是可配置的對象，每個可配置對象定義一個列。