192 lines
6.7 KiB
HTML
192 lines
6.7 KiB
HTML
<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<title>Example: DataTable - Client-side Pagination of Large RecordSet (YUI Library)</title>
|
|
<link type="text/css" rel="stylesheet" href="../../build/reset/reset.css">
|
|
<link type="text/css" rel="stylesheet" href="../../build/fonts/fonts.css">
|
|
<link type="text/css" rel="stylesheet" href="../../build/logger/assets/logger.css">
|
|
<link type="text/css" rel="stylesheet" href="../../build/datatable/assets/datatable.css">
|
|
<link type="text/css" rel="stylesheet" href="./css/examples.css">
|
|
<link type="text/css" rel="stylesheet" href="../assets/dpSyntaxHighlighter.css">
|
|
<style type="text/css">
|
|
/* custom css*/
|
|
#paginated {margin:1em;}
|
|
#paginated table {border-collapse:collapse;}
|
|
#paginated th, #paginated td {border:1px solid #000;}
|
|
#paginated th {background-color:#696969;color:#fff;}/*dark gray*/
|
|
#paginated .yui-dt-odd {background-color:#eee;} /*light gray*/
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="hd">
|
|
<h1><img src="./img/logo.gif" class="logo" alt="Y!"/><a href="./">DataTable Widget</a> :: Client-side Pagination of Large RecordSet</h1>
|
|
</div>
|
|
<div id="bd">
|
|
<div id="paginated"></div>
|
|
|
|
<!-- Sample code begins -->
|
|
<div id="code">
|
|
<h3>Sample Code</h3>
|
|
|
|
<p>Data:</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
{"recordsReturned":null,
|
|
"totalRecords":"1396",
|
|
"startIndex":0,
|
|
"records":[
|
|
{"extid":"702",
|
|
"name":"xmlqoyzgmykrphvyiz",
|
|
"date":"13-Sep-2002",
|
|
"price":"8370",
|
|
"number":"8056",
|
|
"address":"qdfbc",
|
|
"company":"taufrid",
|
|
"desc":"pppzhfhcdqcvbirw",
|
|
"age":"5512",
|
|
"title":"zticbcd",
|
|
"phone":"hvdkltabshgakjqmfrvxo",
|
|
"email":"eodnqepua",
|
|
"zip":"eodnqepua",
|
|
"country":"pdibxicpqipbsgnxyjumsza"},
|
|
|
|
...
|
|
|
|
{"extid":"2047",
|
|
"name":"sqrvpfpibtavxbpjba",
|
|
"date":"22-Jun-2004",
|
|
"price":"864",
|
|
"number":"4418",
|
|
"address":"cshyemrwdirsohapbal",
|
|
"company":"cbidbvynxjgabozgarcdzuwo",
|
|
"desc":"wd",
|
|
"age":"1422",
|
|
"title":"pbzqkdrfbfdlmenadtauweu",
|
|
"phone":"aitxmxvbzusjykpap",
|
|
"email":"lbxzcbsdwphrgiaagnx",
|
|
"zip":"lbxzcbsdwphrgiaagnx",
|
|
"country":"p"}
|
|
]}
|
|
</textarea>
|
|
|
|
<p>CSS:</p>
|
|
|
|
<textarea name="code" class="HTML" cols="60" rows="1">
|
|
/* custom css*/
|
|
#paginated {margin:1em;}
|
|
#paginated table {border-collapse:collapse;}
|
|
#paginated th, #paginated td {border:1px solid #000;}
|
|
#paginated th {background-color:#696969;color:#fff;}/*dark gray*/
|
|
#paginated .yui-dt-odd {background-color:#eee;} /*light gray*/
|
|
</textarea>
|
|
|
|
<p>Markup:</p>
|
|
|
|
<textarea name="code" class="HTML" cols="60" rows="1">
|
|
<div id="paginated"></div>
|
|
</textarea>
|
|
|
|
<p>JavaScript:</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
var myColumnHeaders = [
|
|
{key:"extid",text:"ID"},
|
|
{key:"name",text:"Name"},
|
|
{key:"date",text:"Date"},
|
|
{key:"price",text:"Price"},
|
|
{key:"number",text:"Number"},
|
|
{key:"address",text:"Address"},
|
|
{key:"company",text:"Company"},
|
|
{key:"desc",text:"Description"},
|
|
{key:"age",text:"Age"},
|
|
{key:"title",text:"Title"},
|
|
{key:"phone",text:"Phone"},
|
|
{key:"email",text:"Email"},
|
|
{key:"zip",text:"Zip"},
|
|
{key:"country",text:"Country"}
|
|
];
|
|
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
|
|
|
// Show over 1000 records
|
|
var myDataSource = new YAHOO.util.DataSource("./php/json_proxy.php");
|
|
// Show 5000 records -- FireBug must be disabled!
|
|
//var myDataSource = new YAHOO.util.DataSource("./php/json5000_proxy.php");
|
|
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
|
|
myDataSource.responseSchema = {
|
|
resultsList: "result",
|
|
fields: ["extid","name","date","price","number","address","company","desc","age","title","phone","email","zip","country"]
|
|
};
|
|
|
|
var oConfigs = {
|
|
caption:"Example: Client-side Pagination of Large RecordSet",
|
|
paginator:true,
|
|
paginatorOptions:{
|
|
rowsPerPage: 100,
|
|
dropdownOptions: [25,50,100,500]
|
|
}
|
|
};
|
|
var myDataTable = new YAHOO.widget.DataTable("paginated", myColumnSet, myDataSource, oConfigs);
|
|
</textarea>
|
|
</div>
|
|
<!-- Code sample ends -->
|
|
</div>
|
|
|
|
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
|
|
<script type="text/javascript" src="../../build/dom/dom.js"></script>
|
|
<script type="text/javascript" src="../../build/event/event.js"></script>
|
|
<script type="text/javascript" src="../../build/connection/connection.js"></script>
|
|
<script type="text/javascript" src="../../build/logger/logger.js"></script>
|
|
<script type="text/javascript" src="../../build/datasource/datasource-beta-debug.js"></script>
|
|
<script type="text/javascript" src="../../build/datatable/datatable-beta-debug.js"></script>
|
|
<script type="text/javascript">
|
|
var myLogger = new YAHOO.widget.LogReader();
|
|
myLogger.collapse();
|
|
|
|
/****************************************************************************/
|
|
/****************************************************************************/
|
|
/****************************************************************************/
|
|
|
|
var myColumnHeaders = [
|
|
{key:"extid",text:"ID"},
|
|
{key:"name",text:"Name"},
|
|
{key:"date",text:"Date"},
|
|
{key:"price",text:"Price"},
|
|
{key:"number",text:"Number"},
|
|
{key:"address",text:"Address"},
|
|
{key:"company",text:"Company"},
|
|
{key:"desc",text:"Description"},
|
|
{key:"age",text:"Age"},
|
|
{key:"title",text:"Title"},
|
|
{key:"phone",text:"Phone"},
|
|
{key:"email",text:"Email"},
|
|
{key:"zip",text:"Zip"},
|
|
{key:"country",text:"Country"}
|
|
];
|
|
var myColumnSet = new YAHOO.widget.ColumnSet(myColumnHeaders);
|
|
|
|
// Show over 1000 records
|
|
var myDataSource = new YAHOO.util.DataSource("./php/json_proxy.php");
|
|
// Show 5000 records -- FireBug must be disabled!
|
|
//var myDataSource = new YAHOO.util.DataSource("./php/json5000_proxy.php");
|
|
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
|
|
myDataSource.responseSchema = {
|
|
resultsList: "result",
|
|
fields: ["extid","name","date","price","number","address","company","desc","age","title","phone","email","zip","country"]
|
|
};
|
|
|
|
var oConfigs = {
|
|
caption:"Example: Client-side Pagination of Large RecordSet",
|
|
paginator:true,
|
|
paginatorOptions:{
|
|
rowsPerPage: 100,
|
|
dropdownOptions: [25,50,100,500]
|
|
}
|
|
};
|
|
var myDataTable = new YAHOO.widget.DataTable("paginated", myColumnSet, myDataSource, oConfigs);
|
|
</script>
|
|
<script type="text/javascript" src="../assets/dpSyntaxHighlighter.js"></script>
|
|
<script type="text/javascript">
|
|
dp.SyntaxHighlighter.HighlightAll('code');
|
|
</script>
|
|
</body>
|
|
</html>
|