ExtJs4.0 Grid分頁詳解

網上有好多關於Grid分頁的，各種語言都有，但大部分都是一樣的，都只是講了Grid分頁的語法，很少說到如何和後臺的數據庫交互，查出數據，同樣剛接觸Extjs，希望和菜鳥級別的兄弟姐妹們，共同進步。

前臺代碼：

var itemsPerPage = 2;
var store = Ext.create('Ext.data.Store', {
autoLoad: { start: 0, limit: itemsPerPage },
fields: ['AA001', 'AA002', 'AA003', 'AA004', 'AA005', 'AA006', 'AA007'],
pageSize: itemsPerPage,
proxy: {
type: 'ajax',
url: 'HandlerFun.ashx?Type=Support',
reader: {
type: 'json',
root: 'rows',
totalProperty: 'total'
}
}

});

var gridHeight = document.body.clientHeight * 19;

Ext.ClassManager.setAlias('Ext.selection.CheckboxModel', 'selection.checkboxmodel');

var grid = Ext.create('Ext.grid.Panel', {
title: '',
renderTo: "grid",
autoWidth: true,
height: gridHeight,
frame: true,
store: store,
multiSelect: false,
selModel: { selType: 'checkboxmodel' }, //在首列實現checkbox，僅此在首列
columns: [

{ header: '單據類別',  100, dataIndex: 'AA001', sortable: true },
{ header: '單據號碼',  150, dataIndex: 'AA002', sortable: true },
{ header: '單據日期',  80, dataIndex: 'AA003', sortable: true },
{ header: '客戶編號',  80, dataIndex: 'AA004', sortable: true },
{ header: '客戶分類',  80, dataIndex: 'AA005' },
{ header: '聯絡人',  80, dataIndex: 'AA006' }
{ header: '電話號碼',  80, dataIndex: 'AA007' }

],
bbar: [
{
xtype: 'pagingtoolbar',
store: store,
displayInfo: true
}
]
});
store.load({ params: { start: 0, limit: 2} });

後臺:

分頁原來和以前其他的分頁原理都是一樣的，就是當前是第幾頁，然後每一頁顯示多少條記錄，到數據庫中取出來，然後show出來就Ok了！

因為是.net ，在在.ashx文件中，獲取 start 和limit，有人說start是頁，limit是此頁的數目，其實

，int page代表是頁數，page=start/limit+1   //獲取第幾頁

int beginShowCount ,showCount=page*limit-limit+1;  //這是當前頁數的 起始位置

int endShowCount ,endShowCount=page*limit； //這是當前頁的  結束位置

表達可能不好，解釋一下起始位置，假如每頁顯示2條記錄，那就應該讀兩套記錄。那第一頁就是從第一條記錄到第二條記錄，起始就是第一條記錄，結束就是第二條記錄。

數據庫語句  select * from (select row_number() over (order by AA001) as ID,* from dbo.RegalAA) as b where ID between 1  and  5

把 1 換成 beginShowCount ,5換成 endShowCount就可以了，

JSON對象

private string Dtb2Json(DataTable dtb, int total)
{
JavaScriptSerializer jss = new JavaScriptSerializer();
ArrayList dic = new ArrayList();
foreach (DataRow row in dtb.Rows)
{
Dictionary<string, object> drow = new Dictionary<string, object>();
foreach (DataColumn col in dtb.Columns)
{
drow.Add(col.ColumnName, row[col.ColumnName]);
}
dic.Add(drow);
}
string str = jss.Serialize(dic);
return "{" + "\"total\":" + total + ",\"rows\":" + str + "}";
// return str;
}

這裡的total是整個所有的記錄的總和哦！在前臺totalProerty那不能寫錯！

後臺代碼：

//當前是第幾頁
string start = context.Request["start"];
int currentpage = int.Parse(start);

//每一頁顯示的數目
string limit = context.Request["limit"];
int pagetotal = int.Parse(limit);
DataTable dt = BLL.GetDataToGridSupport(currentpage,pagetotal);//獲取喲顯示的記錄
DataTable dttotal = BLL.GetDataToGridSupport();//獲取總記錄數
int total = dttotal.Rows.Count;//獲取總記錄數 

context.Response.Write(Dtb2Json(dt, total));