mirror of
https://github.com/Mottie/tablesorter.git
synced 2025-01-12 15:24:21 +00:00
Docs: Add build table example HTML for json
This commit is contained in:
Mottie
parent
8c2844b0ce
commit
ef8d85c4d0
@ -701,46 +701,6 @@ Album,Artist,Price ($)</pre>
|
||||
<li>Always verify that the JSON is valid (use <a href="http://jsonlint.com/">JSONLint</a>) and realize that browsers like Chrome will not allow you to access locally hosted (desktop) JSON files. Test it with Firefox instead.</li>
|
||||
</ul>
|
||||
|
||||
<h3>Build.json file</h3>
|
||||
<pre class="prettyprint lang-js">{
|
||||
"headers" : [
|
||||
[
|
||||
{ "text": "First Name", "class": "fname", "width": "20%" },
|
||||
"Last Name",
|
||||
{ "text": "Age", "class": "age", "data-sorter" : false },
|
||||
"Total",
|
||||
{ "text": "Discount", "class" : "sorter-false" },
|
||||
{ "text": "Date", "class" : "date" }
|
||||
]
|
||||
],
|
||||
"footers" : "clone",
|
||||
"rows" : [
|
||||
[ "Peter", "Parker", 28, "$9.99", "20%", "Jul 6, 2006 8:14 AM" ],
|
||||
[ "John", "Hood", 33, "$19.99", "25%", "Dec 10, 2002 5:14 AM" ],
|
||||
[ "Clark", "Kent", 18, "$15.89", "44%", "Jan 12, 2003 11:14 AM" ],
|
||||
|
||||
{ "newTbody": true, "class": "tablesorter-infoOnly" },
|
||||
{ "cells" : [ { "html": "<strong>JSON Info Row</strong>", "colspan": 6 } ] },
|
||||
|
||||
{ "newTbody" : true },
|
||||
[ "Bruce", "Evans", 22, "$13.19", "11%", "Jan 18, 2007 9:12 AM" ],
|
||||
[ "Bruce", "Almighty", 45, "$153.19", "44%", "Jan 18, 2001 9:12 AM" ],
|
||||
|
||||
{ "class": "specialRow",
|
||||
"cells" : [
|
||||
{ "text": "Fred", "class": "fname" },
|
||||
{ "text": "Smith", "class": "lname" },
|
||||
{ "text": 18, "class": "age", "data-info": "fake ID!, he's only 16" },
|
||||
{ "text": "$22.44", "class": "total" },
|
||||
"8%",
|
||||
{ "text": "Aug 20, 2012 10:15 AM", "class": "date" }
|
||||
],
|
||||
"data-info" : "This row likes turtles"
|
||||
}
|
||||
]
|
||||
}</pre>
|
||||
<h3>HTML</h3>
|
||||
<pre class="prettyprint lang-html"><div id="object2Table2"></div></pre>
|
||||
<h3>Javascript</h3>
|
||||
<pre class="prettyprint lang-js">$(function() {
|
||||
$('#object2Table2').tablesorter({
|
||||
@ -752,6 +712,142 @@ Album,Artist,Price ($)</pre>
|
||||
}
|
||||
});
|
||||
});</pre>
|
||||
|
||||
<h3>Build.json file</h3>
|
||||
<pre class="prettyprint lang-js">{
|
||||
"headers": [
|
||||
[
|
||||
{ "text": "First Name", "class": "fname", "width": "20%" },
|
||||
"Last Name",
|
||||
{ "text": "Age", "class": "age", "data-sorter": false },
|
||||
"Total",
|
||||
{ "text": "Discount", "class": "sorter-false" },
|
||||
{ "text": "Date", "class": "date", "width": "20%" }
|
||||
]
|
||||
],
|
||||
"footers": "clone",
|
||||
"rows": [
|
||||
[ "Peter", "Parker", 28, "$9.99", "20%", "Jul 6, 2006 8:14 AM" ],
|
||||
[ "John", "Hood", 33, "$19.99", "25%", "Dec 10, 2002 5:14 AM" ],
|
||||
[ "Clark", "Kent", 18, "$15.89", "44%", "Jan 12, 2003 11:14 AM" ],
|
||||
|
||||
{ "newTbody": true, "class": "tablesorter-infoOnly" },
|
||||
{ "cells": [ { "html": "<strong>JSON Info Row</strong>", "colspan": 6 } ] },
|
||||
|
||||
{ "newTbody": true },
|
||||
[ "Bruce", "Evans", 22, "$13.19", "11%", "Jan 18, 2007 9:12 AM" ],
|
||||
[ "Brice", "Almighty", 45, "$153.19", "44%", "Jan 18, 2001 9:12 AM" ],
|
||||
|
||||
{ "class": "specialRow",
|
||||
"cells": [
|
||||
{ "text": "Fred", "class": "fname" },
|
||||
{ "text": "Smith", "class": "lname" },
|
||||
{ "text": 18, "class": "age", "data-info": "fake ID!, he's only 16" },
|
||||
{ "text": "$22.44", "class": "total" },
|
||||
"8%",
|
||||
{ "text": "Aug 20, 2012 10:15 AM", "class": "date" }
|
||||
],
|
||||
"data-info": "This row likes turtles"
|
||||
}
|
||||
]
|
||||
}</pre>
|
||||
<h3>HTML (before)</h3>
|
||||
<pre class="prettyprint lang-html"><div id="object2Table2"></div></pre>
|
||||
|
||||
<h3>HTML (after)</h3>
|
||||
<pre class="prettyprint lang-html"><div id="object2Table2">
|
||||
<table class="tablesorter tablesorter-blue" role="grid">
|
||||
<colgroup>
|
||||
<col style="width: 20%;">
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<col>
|
||||
<col style="width: 20%;">
|
||||
</colgroup>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="fname">First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th class="age" data-sorter="false">Age</th>
|
||||
<th>Total</th>
|
||||
<th class="sorter-false">Discount</th>
|
||||
<th class="date">Date</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Peter</td>
|
||||
<td>Parker</td>
|
||||
<td>28</td>
|
||||
<td>$9.99</td>
|
||||
<td>20%</td>
|
||||
<td>Jul 6, 2006 8:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>John</td>
|
||||
<td>Hood</td>
|
||||
<td>33</td>
|
||||
<td>$19.99</td>
|
||||
<td>25%</td>
|
||||
<td>Dec 10, 2002 5:14 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Clark</td>
|
||||
<td>Kent</td>
|
||||
<td>18</td>
|
||||
<td>$15.89</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 12, 2003 11:14 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody class="tablesorter-infoOnly">
|
||||
<tr>
|
||||
<td colspan="6">
|
||||
<strong>JSON Info Row</strong>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Bruce</td>
|
||||
<td>Evans</td>
|
||||
<td>22</td>
|
||||
<td>$13.19</td>
|
||||
<td>11%</td>
|
||||
<td>Jan 18, 2007 9:12 AM</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Brice</td>
|
||||
<td>Almighty</td>
|
||||
<td>45</td>
|
||||
<td>$153.19</td>
|
||||
<td>44%</td>
|
||||
<td>Jan 18, 2001 9:12 AM</td>
|
||||
</tr>
|
||||
<tr class="specialRow" data-info="This row likes turtles">
|
||||
<td class="fname">Fred</td>
|
||||
<td class="lname">Smith</td>
|
||||
<td class="age" data-info="fake ID!, he's only 16">18</td>
|
||||
<td class="total">$22.44</td>
|
||||
<td>8%</td>
|
||||
<td class="date">Aug 20, 2012 10:15 AM</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th class="fname">First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th class="age" data-sorter="false">Age</th>
|
||||
<th>Total</th>
|
||||
<th class="sorter-false">Discount</th>
|
||||
<th class="date">Date</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div></pre>
|
||||
|
||||
|
||||
<h3>Result</h3>
|
||||
<div id="object2Table2" class="container"></div>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user