Grid的分頁必須依靠服務端（Server Side）來劃分好每一頁的數據才可以完成。

本例中的服務端語言是PHP,數據庫是MySQL，用來導出一些隨機的數據。下列腳本的作用是，獲取我們想要的數據，同時這些數據是已分好頁的數據。分頁的參數是由Page Toolbar傳入的變量limit和start所決定的。

$link = mysql_pconnect("test-db.vinylfox.com", "test", "testuser")
or die("Could not connect");
mysql_select_db("test") or die("Could not select database");
$sql_count = "SELECT id, name, title, hire_date, active FROM random_employee_data";
$sql = $sql_count . " LIMIT ".$_GET['start'].", ".$_GET['limit'];
$rs_count = mysql_query($sql_count);
$rows = mysql_num_rows($rs_count);
$rs = mysql_query($sql);
while($obj = mysql_fetch_object($rs))
{
$arr[] = $obj;
}
Echo $_GET['callback'].'({"total":"'.$rows.'","results":'.json_encode($arr).'})';

由于每個后臺開發的環境都不盡相同，所以這里的服務端代碼就不細究了。

怎么做一個分頁的Grid

本例采用的是ScriptTagProxy，原因是 范例代碼 和 服務端代碼 不是在同一個服務器上（譯注：即“跨域”），而大多數的情況是，在同一個服務器上得到數據，直接用HttpProxy就可以了。

使用DataStore與平時唯一不同的地方，便是需要設置totalProerty屬性。本例中，我們從服務端的腳本計算出“total”這個值，告訴DataStore總共有多少個記錄，這里指的是所有的記錄數。

var ds = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://www.vinylfox.com/yui-ext/examples/grid-paging/grid-paging-data.php'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total',
id: 'id'
}, [
{name: 'employee_name', mapping: 'name'},
{name: 'job_title', mapping: 'title'},
{name: 'hire_date', mapping: 'hire_date', type: 'date', dateFormat: 'm-d-Y'},
{name: 'is_active', mapping: 'active'}
])
});

分頁欄Toolbar

這里加入一個分頁欄到Grid的面板中，--差不多完成嘍。

var gridFoot = grid.getView().getFooterPanel(true);
var paging = new Ext.PagingToolbar(gridFoot, ds, {
pageSize: 25,
displayInfo: true,
displayMsg: 'Displaying results {0} - {1} of {2}',
emptyMsg: "No results to display"
});

最后傳入start和limit參數以初始化數據。

ds.load({params:{start:0, limit:25}});

花時間較多的地方是，在后臺如何生成數據，以配合Grid的運作，一旦這些工作OK后，分頁Grid再不是一件難事了。

本文轉自:http://www.ajaxjs.com/yuicn/article.asp?id=20076012

---------------------------------------------------------------------------------------------------------------------------------
說人之短，乃護己之短?？浼褐L，乃忌人之長。皆由存心不厚，識量太狹耳。能去此弊，可以進德，可以遠怨。
http://m.tkk7.com/szhswl
------------------------------------------------------------------------------------------------------ ----------------- ---------