| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
| 2 | <!-- |
| 3 | |
| 4 | Using a made-up xmlns.. |
| 5 | |
| 6 | --> |
| 7 | <html xmlns:mochi="http://mochikit.com/examples/ajax_tables"> |
| 8 | <head> |
| 9 | <title>Sortable Tables from Scratch with MochiKit</title> |
| 10 | <link href="ajax_tables.css" rel="stylesheet" type="text/css" /> |
| 11 | <script type="text/javascript" src="../../MochiKit/MochiKit.js"></script> |
| 12 | <script type="text/javascript" src="ajax_tables.js"></script> |
| 13 | </head> |
| 14 | <body> |
| 15 | <h1> |
| 16 | Sortable Ajax Tables in JSON and XML with MochiKit |
| 17 | </h1> |
| 18 | <div> |
| 19 | <div> |
| 20 | <p> |
| 21 | This is an example of how one might use <a href="http://mochikit.com/">MochiKit</a> to do |
| 22 | sortable tables from data given by the server in either JSON |
| 23 | or XML format. It uses |
| 24 | <a href="../../doc/html/MochiKit/Async.html">MochiKit.Async</a> |
| 25 | to fetch the data, and |
| 26 | <a href="../../doc/html/MochiKit/DOM.html">MochiKit.DOM</a> |
| 27 | to display it. |
| 28 | </p> |
| 29 | <p> |
| 30 | Includes a micro implementation of something |
| 31 | <a href="http://www.zope.org/Wikis/DevSite/Projects/ZPT/FrontPage">TAL</a>-esque |
| 32 | (called "MochiTAL" in the source, using a mochi: namespace). |
| 33 | For a more detailed description of what happens under the |
| 34 | covers, view the <a href="ajax_tables.js" class="view-source">ajax_tables.js</a> |
| 35 | source and look at the comments. |
| 36 | </p> |
| 37 | </div> |
| 38 | </div> |
| 39 | <div> |
| 40 | View Source: [ |
| 41 | <a href="index.html" class="view-source">index.html</a> | |
| 42 | <a href="ajax_tables.js" class="view-source">ajax_tables.js</a> | |
| 43 | <a href="domains.json" class="view-source">domains.json</a> | |
| 44 | <a href="domains.xml" class="view-source">domains.xml</a> |
| 45 | ] |
| 46 | </div> |
| 47 | <div> |
| 48 | Load data: [ |
| 49 | <a href="domains.json" mochi:dataformat="json">domains.json</a> |
| 50 | | <a href="domains.xml" mochi:dataformat="xml">domains.xml</a> |
| 51 | ] |
| 52 | (current format: <span class="mochi-template" mochi:content="format">loading</span>) |
| 53 | </div> |
| 54 | <table id="sortable_table" class="datagrid"> |
| 55 | <thead> |
| 56 | <tr> |
| 57 | <th mochi:sortcolumn="domain_name str">Domain Name</th> |
| 58 | <th mochi:sortcolumn="create_date isoDate">Creation Date</th> |
| 59 | <th mochi:sortcolumn="expiry_date isoDate">Expiry Date</th> |
| 60 | <th mochi:sortcolumn="organization_name istr">Organization Name</th> |
| 61 | </tr> |
| 62 | </thead> |
| 63 | <tfoot class="invisible"> |
| 64 | <tr> |
| 65 | <td colspan="0"></td> |
| 66 | </tr> |
| 67 | </tfoot> |
| 68 | <tbody class="mochi-template"> |
| 69 | <tr mochi:repeat="item domains"> |
| 70 | <td mochi:content="item.domain_name">mochibot.com</td> |
| 71 | <td mochi:content="item.create_date">2005-02-10</td> |
| 72 | <td mochi:content="item.expiry_date">2007-02-10</td> |
| 73 | <td mochi:content="item.organization_name">Jameson Hsu</td> |
| 74 | </tr> |
| 75 | <tr class="mochi-example"> |
| 76 | <td>pythonmac.org</td> |
| 77 | <td>2003-09-24</td> |
| 78 | <td>2006-09-24</td> |
| 79 | <td>Bob Ippolito</td> |
| 80 | </tr> |
| 81 | <tr class="mochi-example"> |
| 82 | <td>undefined.org</td> |
| 83 | <td>2000-01-10</td> |
| 84 | <td>2006-01-10</td> |
| 85 | <td>Robert J Ippolito</td> |
| 86 | </tr> |
| 87 | <tr class="mochi-example"> |
| 88 | <td>python.org</td> |
| 89 | <td>1995-03-27</td> |
| 90 | <td>2007-03-28</td> |
| 91 | <td>Python Software Foundation</td> |
| 92 | </tr> |
| 93 | </tbody> |
| 94 | </table> |
| 95 | </body> |
| 96 | </html> |