upgraded yui to 2.2.2 and yui-ext to 1.0.1a
This commit is contained in:
JT Smith
parent
4d9af2c691
commit
547ced6500
1992 changed files with 645731 additions and 0 deletions
192
www/extras/yui/examples/datatable/paginated.html
Normal file
192
www/extras/yui/examples/datatable/paginated.html
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
<!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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue