~ubuntu-branches/ubuntu/utopic/jquery-goodies/utopic

« back to all changes in this revision

Viewing changes to tablesorter/docs/example-ajax.html

  • Committer: Bazaar Package Importer
  • Author(s): Marcelo Jorge Vieira (metal)
  • Date: 2011-07-25 15:39:18 UTC
  • mfrom: (1.1.1 upstream)
  • Revision ID: james.westby@ubuntu.com-20110725153918-mig1d2wa18u168cr
Tags: 4-1
* New Upstream Version
  + Added jQuery-metadata
  + Added jQuery-tablesorter, thanks Ben Finney (Closes: #631219, #584127)
  + Added jQuery-treetable (Closes: #584403)
  + Added jQuery-livequery
  + Fixed wrong path to images in the jQuery-fancybox (Closes: #628029)
* Updated Standards-Version to 3.9.2 (no changes)

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
2
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
3
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
 
4
<head>
 
5
        <title>jQuery plugin: Tablesorter 2.0 - Appending table data with ajax</title>
 
6
        <link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />
 
7
        <link rel="stylesheet" href="../themes/blue/style.css" type="text/css" id="" media="print, projection, screen" />
 
8
        <script type="text/javascript" src="../jquery-latest.js"></script>
 
9
        <script type="text/javascript" src="../jquery.tablesorter.js"></script>
 
10
        <script type="text/javascript" src="js/chili/chili-1.8b.js"></script>
 
11
        <script type="text/javascript" src="js/docs.js"></script>
 
12
        <script type="text/javascript" src="js/examples.js"></script>
 
13
        <script type="text/javascript" id="js">
 
14
        $(document).ready(function() {
 
15
        $("table").tablesorter();
 
16
        $("#ajax-append").click(function() {
 
17
                 $.get("assets/ajax-content.html", function(html) {
 
18
                        // append the "ajax'd" data to the table body
 
19
                        $("table tbody").append(html);
 
20
                        // let the plugin know that we made a update
 
21
                        $("table").trigger("update");
 
22
                        // set sorting column and direction, this will sort on the first and third column
 
23
                        var sorting = [[2,1],[0,0]];
 
24
                        // sort on the first column
 
25
                        $("table").trigger("sorton",[sorting]);
 
26
                });
 
27
                return false;
 
28
        });
 
29
});             
 
30
        </script>
 
31
</head>
 
32
<body>
 
33
<div id="banner">       
 
34
        <h1>table<em>sorter</em></h1>
 
35
        <h2>Appending table data with ajax</h2>
 
36
        <h3>Flexible client-side table sorting</h3>
 
37
        <a href="index.html">Back to documentation</a>
 
38
</div>
 
39
<div id="main">
 
40
        <h1>Demo</h1>
 
41
        <div id="demo">
 
42
                <table cellspacing="1" class="tablesorter">
 
43
                        <thead>
 
44
                                <tr>
 
45
                                        <th>First Name</th>
 
46
                                        <th>Last Name</th>
 
47
                                        <th>Age</th>
 
48
                                        <th>Total</th>
 
49
                                        <th>Discount</th>
 
50
                                        <th>Date</th>
 
51
        
 
52
                                </tr>
 
53
                        </thead>
 
54
                        <tbody>
 
55
                                <tr>
 
56
                                        <td>Peter</td>
 
57
                                        <td>Parker</td>
 
58
                                        <td>28</td>
 
59
                                        <td>$9.99</td>
 
60
                                        <td>20%</td>
 
61
                                        
 
62
                                        <td>Jul 6, 2006 8:14 AM</td>
 
63
                                </tr>
 
64
                                <tr>
 
65
                                        <td>John</td>
 
66
                                        <td>Hood</td>
 
67
                                        <td>33</td>
 
68
                                        <td>$19.99</td>
 
69
                                        <td>25%</td>
 
70
                                        
 
71
                                        <td>Dec 10, 2002 5:14 AM</td>
 
72
                                </tr>
 
73
                                <tr>
 
74
                                        <td>Clark</td>
 
75
                                        <td>Kent</td>
 
76
                                        <td>18</td>
 
77
                                        <td>$15.89</td>
 
78
                                        <td>44%</td>
 
79
                                        <td>Jan 12, 2003 11:14 AM</td>
 
80
                                </tr>
 
81
                                <tr>
 
82
                                        <td>Bruce</td>
 
83
                                        <td>Almighty</td>
 
84
                                        <td>45</td>
 
85
                                        <td>$153.19</td>
 
86
                                        <td>44%</td>
 
87
                                        
 
88
                                        <td>Jan 18, 2001 9:12 AM</td>
 
89
                                </tr>
 
90
                                <tr>
 
91
                                        <td>Bruce</td>
 
92
                                        <td>Evans</td>
 
93
                                        <td>22</td>
 
94
                                        <td>$13.19</td>
 
95
                                        <td>11%</td>
 
96
                                        <td>Jan 18, 2007 9:12 AM</td>
 
97
                                </tr>
 
98
                        </tbody>
 
99
                </table>
 
100
                <a href="#" id="ajax-append">Append new table data</a>
 
101
                <br/>
 
102
                <br/>
 
103
        </div>
 
104
        <h1>Javascript</h1>
 
105
        <div id="javascript">
 
106
                <pre class="javascript"></pre>
 
107
        </div>
 
108
        <h1>HTML</h1>
 
109
        <div id="html">
 
110
                <pre class="html"></pre>
 
111
        </div>
 
112
</div>
 
113
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
 
114
<script type="text/javascript">
 
115
_uacct = "UA-2189649-2";
 
116
urchinTracker();
 
117
</script>
 
118
</body>
 
119
</html>