DataTable Control: Client-side Pagination

Ajax Javascript YUI DataTable Pagination

Paginationという聞きなれない言葉は、下図のような表現によって（テーブルの）ページへの遷移を効率化することをさす。

タイトルにClient-sideとあるのは、クライアント（＝Script）がサーバーにデータを取得に行き、それをもとに上のスタイルを形成するためである。
大抵のAjaxライブラリーには、このPaginationの機能があるものと思うが、画面に表示するページ番号の計算などを自動的にやってくれるので、ありがたい。
下は、最後のページへ遷移したときの画面である。

このサンプルでは、サーバーのPHPプログラムを呼んで、JSONデータを取得している。
（YUIのExample/assets/php/json_proxy.php）
このPHPプログラムは、JSON.phpをrequireしているので、自分の環境にない場合には、Pear::Services_JSONのページよりダウンロードして、PEAR配下においてincludeする必要がある。

以下にJavascriptを含むHTMLの全文を示す。ソース中にある「ajax_yui_datatable_clientside_pagination.Proxy.php」は、json_proxy.phpをrenameして、配置を変えたものである。
ソースを見ると、非常に簡単に、paginationができることがわかる。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title>Ajax Sample</title> 
 
<style type="text/css"> 
body {
	margin:0;
	padding:0;
}
</style> 

<link rel="stylesheet" type="text/css" href="scripts/yui/fonts/fonts-min.css" /> 
<link rel="stylesheet" type="text/css" href="scripts/yui/paginator/assets/skins/sam/paginator.css" /> 
<link rel="stylesheet" type="text/css" href="scripts/yui/datatable/assets/skins/sam/datatable.css" /> 
<script type="text/javascript" src="scripts/yui/yahoo-dom-event/yahoo-dom-event.js"></script> 
<script type="text/javascript" src="scripts/yui/connection/connection-min.js"></script> 
<script type="text/javascript" src="scripts/yui/json/json-min.js"></script> 
<script type="text/javascript" src="scripts/yui/element/element-beta-min.js"></script> 
<script type="text/javascript" src="scripts/yui/paginator/paginator-min.js"></script> 
<script type="text/javascript" src="scripts/yui/datasource/datasource-min.js"></script> 
<script type="text/javascript" src="scripts/yui/datatable/datatable-min.js"></script> 

<style type="text/css" id="defaultstyle">
#main {
	margin: 2px;
	padding: 3px;
}
/*
#paginated {
    text-align: center;
}
*/
#paginated table {
    margin-left:20px; 
    margin-right:auto;
}

#paginated, #paginated .yui-dt-loading {
/*    text-align: center; */
    background-color: transparent;
}
</style>

<script type="text/javascript"> 
YAHOO.util.Event.addListener(window, "load", function() {

	YAHOO.example.ClientPagination = function() {
        var myColumnDefs = [
	    {key:"id", label:"ID"},
            {key:"name", label:"Name"},
            {key:"date", label:"Date"},
            {key:"price", label:"Price"},
            {key:"number", label:"Number"}
   		];
                 
        var myDataSource = new YAHOO.util.DataSource("ajax_yui_datatable_clientside_pagination.Proxy.php?");
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
        myDataSource.responseSchema = {
        	resultsList: "records",
        	fields: ["id","name","date","price","number"]
        };

        // Pagenatorを生成し、DataTableのコンフィグ属性（paginator）として定義する。
        // API DOC(http://developer.yahoo.com/yui/docs/YAHOO.widget.DataTable.html)
        // のConfiguration Attributesを参照
        var paging = new YAHOO.widget.Paginator({
			rowsPerPage: 15
        });
        
        var oConfigs = {
        	paginator: paging,
            initialRequest: "results=504"
            };

        // DataTableにPaginatorを食わせる。
		var myDataTable = new YAHOO.widget.DataTable("paginated", myColumnDefs,
        					myDataSource, oConfigs);
        
        return {
            oDS: myDataSource,
            oDT: myDataTable
        };
    }();
});
</script>
</head> 
 
<body class=" yui-skin-sam">
<div id="main">
<p>Paginationのサンプルです</p>
<div id="paginated"></div> 
</div>
</body> 
</html>