[ Mini Kiebo ]
Server: Windows NT DESKTOP-5B8S0D4 6.2 build 9200 (Windows 8 Professional Edition) i586
Path:
D:
/
xampp182
/
htdocs
/
simpeg
/
zapatec
/
zpgrid
/
zpgrid
/
demo
/
[
Home
]
File: phone_ondemand_xml.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8"> <meta name="description" content=" Paging, sorting, filtering, ranging, and search are performed on the server. Each action sends corresponding request to the server. Server returns one page of data at a time. This running mode can be used to handle millions of records. "> <meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools"> <title>Zapatec DHTML Grid Widget - Server-Side Grid Example</title> <!-- Common JS files --> <script type='text/javascript' src='../../utils/zapatec.js'></script> <!-- Custom includes --> <script type="text/javascript" src="../src/zpgrid.js"></script> <script type="text/javascript" src="demo.js"></script> <!-- ALL demos need these css --> <link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css"> <link href="../../website/css/template.css" rel="stylesheet" type="text/css"> <style type="text/css"> body { width: 778px; } </style> <link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico"> <link href="../themes/layout.css" rel="stylesheet" type="text/css" /> <!-- Include Zapatec Grid XML processing module --> <script type="text/javascript" src="../src/zpgrid-xml.js"></script> <!-- Include Zapatec Slider Widget --> <script type="text/javascript" src="../../zpslider/src/slider.js"></script> </head> <body> <div class='zpCalSubHeader' style='text-align:center;'>Server-Side Grid Example</div> <div class='leftCol'> <h3> Controls</h3> <form onsubmit="return filter(this)"><br/> <fieldset> Filter Rate Period<div id="filterOutRate"></div> </fieldset> <fieldset> <p>Range of Dates</p> <center> <div id="rangeOfDatesScale"></div> <div id="rangeOfDates" style="white-space: nowrap"></div> </center> </fieldset> <fieldset> <p>Range of Minutes</p> <center> <div id="rangeOfMinutesScale"></div> <div id="rangeOfMinutes"></div> </center> </fieldset> <fieldset> Filter Minutes<div id="filterOutMinutes"></div> </fieldset> <fieldset> <p>Find Value</p> <p><input type="checkbox" name="isRegExp"/> Use regular expression</p> <p>Search: <input type="text" name="textFilter" size="6"/> <input type="button" name="buttonText" value="Go" onclick="filter(this.form)"/></p> </fieldset> <fieldset> <p>Reset all filters</p> <input type="button" value="Reset" onclick="resetControls(this.form)"/></p> </fieldset> </form> </div> <div id="2"></div> <div id="1"></div> <div id="3"></div> <div id="4"></div> <div id="5"></div> <div id="scroll" style="margin-left : 300px;"> </div> <div class="mainCol"> This example shows server-side grid. <div class='zpCalDemoText'> <ul> <li>Paging, sorting, filtering, ranging, and search are performed on the server.</li> <li>Each action sends corresponding request to the server.</li> <li>Server returns one page of data at a time.</li> <li>This running mode can be used to handle millions of records.</li> </ul> </div> <div id="gridContainer"></div> </div> <script type="text/javascript"> // Check if demo loaded from server var strLocation = document.location.toString(); if (strLocation.indexOf('http') != 0) { alert('Since this example demonstrates interaction between server and \ javascript application, it must be loaded from server. This example does not \ work if opened from local hard drive.'); } /* * Returns grid source depending on passed arguments. */ function getSource(objArgs) { return { source: 'phone_ondemand_xml.php?args=' + escape(Zapatec.Transport.serializeJsonObj(objArgs)), sourceType: 'xml/url' }; } /* * Initialize grid */ var objGrid = new Zapatec.Grid({ // Use server-side paging, sorting, filtering and search dataOnDemand: true, // Use callback function to get source callbackSource: getSource, // Use "winxp" theme theme: 'winxp', // Put the grid into element with id "gridContainer" container: 'gridContainer', // Initially sort ascending by first column sortColumn: 0, // Use paging and display 10 rows per page rowsPerPage: 10, // Call this function when cell is clicked callbackCellOnClick: onCellClick, // Display filter out forms filterOut: [ // Filter Rate Period { // Use column number 3 (first column number is 0). column: 3, // Put checkboxes into element with id "filterOutRate". container: 'filterOutRate' }, // Filter Minutes { // Use column number 5 (first column number is 0). column: 5, // Sort descending sortDesc: true, // Put checkboxes into element with id "filterOutMinutes". container: 'filterOutMinutes' } ], // Do not allow multiple select multipleSelect: false, // Event listeners eventListeners: { 'gridInitialized': onGridInit } }); </script> <noscript> <br/> This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'> AJAX Component</a> - Zapatec DHTML Grid Widget, but your browser does not support Javascript. <br/> <br/> </noscript> <br/><br/><br/> <div class="footer" style='width: 778px; text-align:center; margin-top:2em'> © 2004-2007 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong> </div> </body> </html>