Commit | Line | Data |
---|---|---|
6a1aa64f DV |
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> |