アットウィキロゴ
のぶニャがの野望 @ ウィキ
掲示板 掲示板 ページ検索 ページ検索 メニュー メニュー

hhh

最終更新:

Bot(ページ名リンク)

- view
管理者のみ編集可
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Table Sorting, Filtering, Etc from JavascriptToolbox.com</title>
<link rel="stylesheet" type="text/css" href="/css.php" media="all">
<script type="text/javascript" src="/main.js"></script>
<script type="text/javascript" src="/includes/jquery.js"></script>
<link type="text/css" rel="stylesheet" href="/includes/SyntaxHighlighter.css"></link>
<script language="javascript" src="/includes/sh/shCore.js"></script>
<script language="javascript" src="/includes/sh/shBrushJScript.js"></script>
<script language="javascript">$(function() { dp.SyntaxHighlighter.HighlightAll('code'); });</script><script type="text/javascript" src="/libsource.php/table/source/table.js"></script>
<link rel="stylesheet" type="text/css" href="table.css" media="all">
</head>
<body>
<table class="columns" cellspacing="0" border="0">
<tr>
<td class="left" rowspan="2">
	<div style="text-align:center;"><a href="/" title="Home"><img src="/logo5.gif" alt="Logo"></a></div>

	<div class='portlet'>
		<h5>Navigation</h5>
		<div class='pBody'>
			<a  href="/" title="Home">Home</a>
			<a  class="selected" href="/lib/" title="Libraries">Libraries</a>
			<a  href="/gadget/" title="Gadgets">iGoogle Gadgets</a>
			<a  href="/bestpractices/" title="Best Practices">Javascript Best Practices</a>
			<a  href="/support/" title="Support">Support</a>
			<a  href="/resources/" title="Javascript Resources">Resources / Links</a>
			<a  href="/donate/" title="Donate To Support This Site">Donate!</a>
			<a  href="/aboutme/" title="About Me">About Me</a>
			<a href="http://www.AjaxToolbox.com/" title="AJAX" target="_blank">AJAX Toolbox</a>
		</div>
	</div>

	<div class='portlet'>
		<h5>jQuery</h5>
		<div class='pBody'>
			<a  href="/jquery/" title="jQuery Tips">jQuery Tips</a>
			<a  href="/lib/contextmenu/" title="">Context Menu Plugin</a>
			<a  href="/jquery/cheatsheet/" title="">jQuery Cheat Sheet</a>
		</div>
	</div>
	
	<div class='portlet'>
		<h5>Libraries</h5>
		<div class='pBody'>
			<a  href="/lib/calendar/" title="">Calendar Popup</a>
			<a  href="/lib/checkboxgroup/" title="">Checkbox Group</a>
			<a  href="/lib/datadumper/" title="">Data Dumper</a>
			<a  href="/lib/validations/" title="">Data Validation</a>
			<a  href="/lib/date/" title="">Date Functions</a>
			<a  href="/lib/mktree/" title="">DHTML Tree</a>
			<a  href="/lib/dragiframe/" title="">Draggable Iframes</a>
			<a  href="/lib/dynamicoptionlist/" title="">Dependent Select Boxes</a>
			<a  href="/lib/form/" title="">Form Functions</a>
			<a  href="/lib/objectposition/" title="">Object Position</a>
			<a  href="/lib/optiontransfer/" title="">Option Transfer</a>
			<a  href="/lib/popup/" title="">Popups (In-Page DIV)</a>
			<a  href="/lib/selectbox/" title="">Selectbox Functions</a>
			<a  class="selected" href="/lib/table/" title="">Table Sorting And Utils</a>
			<a  href="/lib/util/" title="">Util/DOM/CSS/Event</a>
		</div>
	</div>

	<h5>doctype [<a href="#" onClick="alert('Since some web browsers use the DOCTYPE of a document to switch between Quirks or Standards mode, some code may have different behavior depending on the DOCTYPE specified. These links allow pages to be tested using strict, loose, or no doctype at all for compatability testing.'); return false;" title="What's This?">?</a>]</h5>
	[<a href="?doctype=strict">strict</a>]
	[<a href="?doctype=loose">loose</a>]
	[<a href="?doctype=none">none</a>]

</td>
<td class="header" colspan="2">
	<div id="searchbox"><form method="get" action="http://www.google.com/custom"><input type="hidden" name="domains" value="javascripttoolbox.com"><input class="search" type="text" name="q" size="15" maxlength="255" value="Search!" onClick="this.style.color='black';this.value='';"><input type="submit" name="sa" value="go"><input type="hidden" name="sitesearch" value="javascripttoolbox.com"><input type="hidden" name="client" value="pub-9155030588311591"><input type="hidden" name="forid" value="1"><input type="hidden" name="ie" value="ISO-8859-1"><input type="hidden" name="oe" value="ISO-8859-1"><input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#AAAAAA;VLC:663399;AH:center;BGC:FFFFFF;LBGC:C2DDF4;ALC:002BB8;LC:002BB8;T:000000;GFNT:AAAAAA;GIMP:AAAAAA;LH:50;LW:588;L:http://www.javascripttoolbox.com/search_header.gif;S:http://www.JavascriptToolbox.com/;FORID:1;"><input type="hidden" name="hl" value="en"></form></div>
	<h1>Table Sorting, Filtering, Etc - <span class="beta_tag">BETA!</span></h1>	</td>
</tr>
<tr>
<td class="middle"><div class="corner cornerul"></div><div class="body">
<div class="tabContainer">
<div class="selected"><img src="/images/tabs/overview.gif" alt=""> Overview</div>
<div><a href="examples.php"><img src="/images/tabs/examples.gif" alt=""> Examples</a></div>
<div><a href="documentation.php"><img src="/images/tabs/documentation.gif" alt=""> Documentation</a></div>
<div><a href="jquery.php"><img src="/images/tabs/jquery.gif" alt=""> jQuery</a></div>
<div><a href="test.php"><img src="/images/tabs/test.gif" alt=""> Test Cases</a></div>
<div><a href="notes.php"><img src="/images/tabs/notes.gif" alt=""> Notes</a></div>
<div><a href="source.php"><img src="/images/tabs/source.gif" alt=""> Source</a></div>
</div>
<div class="tabcontent"><br>




<p>
Tabular data in table form is common on web sites and web applications, and a common requirement is to manipulate the data tables on the client side, rather than going back to the server to sort, filter, page, etc. This library offers the key functionality that is typical - the most common of which is client-side table sorting.
</p>

<p>
Some of the key features of this library are:
<ul>
<li>Sorting is <b>fast</b>. Much faster than most other libraries, due to a number of optimizations
<li>Rowspan and Colspan in headers will not confuse the code
<li>Alternate row coloring (a common item) is handled by re-shading after sorting or filtering
<li>Tbody contents are handled separately, so there can be separate sortable sections of a table
<li>Easy CSS classes are applied to cells after filtering, sorting, etc which you can hook into from your CSS rules to show the sorted column or the cells which are filtered.
</ul>
</p>

<h2>Unobtrusive Client-Side Table Sorting, Filtering, and Paging Example</h2>

<p>
All of the functionality in these tables was accomplished by simply inserting class names.
</p>

<p>
<b>Absolutely no javascript coding was required!</b>
</p>

<br>

<table id="t1" class="example table-autosort table-autofilter table-autopage:10 table-stripeclass:alternate table-page-number:t1page table-page-count:t1pages table-filtered-rowcount:t1filtercount table-rowcount:t1allcount">
<thead>
<tr>
	<th class="table-filterable table-sortable:numeric">Index</th>
	<th class="table-sortable:numeric">Numeric</th>
	<th class="table-filterable table-sortable:default">Text</th>
	<th class="table-sortable:currency">Currency</th>
	<th class="table-sortable:date">Date</th>
</tr>
</thead>
<tbody>
<tr>
	<td>0</td>
	<td>599.9</td>
	<td>Bill</td>
	<td>$40.94</td>
	<td>2015-02-26</td>
</tr>
<tr class="alternate">
	<td>1</td>
	<td>962.3</td>
	<td>Joe</td>
	<td>$71.34</td>
	<td>2015-10-16</td>
</tr>
<tr>
	<td>2</td>
	<td>263.2</td>
	<td>Bob</td>
	<td>$22.24</td>
	<td>2014-03-21</td>
</tr>
<tr class="alternate">
	<td>3</td>
	<td>23.7</td>
	<td>Matt</td>
	<td>$91.04</td>
	<td>2015-03-25</td>
</tr>
<tr>
	<td>4</td>
	<td>558.7</td>
	<td>Bill</td>
	<td>$86.54</td>
	<td>2014-01-25</td>
</tr>
<tr class="alternate">
	<td>5</td>
	<td>520.4</td>
	<td>Joe</td>
	<td>$76.84</td>
	<td>2014-08-11</td>
</tr>
<tr>
	<td>6</td>
	<td>947.3</td>
	<td>Bob</td>
	<td>$43.24</td>
	<td>2014-01-15</td>
</tr>
<tr class="alternate">
	<td>7</td>
	<td>707</td>
	<td>Matt</td>
	<td>$34.94</td>
	<td>2016-02-11</td>
</tr>
<tr>
	<td>8</td>
	<td>519.7</td>
	<td>Bill</td>
	<td>$54.94</td>
	<td>2015-08-21</td>
</tr>
<tr class="alternate">
	<td>9</td>
	<td>531</td>
	<td>Joe</td>
	<td>$14.34</td>
	<td>2015-02-27</td>
</tr>
<tr>
	<td>10</td>
	<td>91.6</td>
	<td>Bob</td>
	<td>$74.34</td>
	<td>2013-04-15</td>
</tr>
<tr class="alternate">
	<td>11</td>
	<td>726.4</td>
	<td>Matt</td>
	<td>$70.54</td>
	<td>2015-07-19</td>
</tr>
<tr>
	<td>12</td>
	<td>561.9</td>
	<td>Bill</td>
	<td>$96.94</td>
	<td>2016-03-31</td>
</tr>
<tr class="alternate">
	<td>13</td>
	<td>901.2</td>
	<td>Joe</td>
	<td>$99.24</td>
	<td>2015-12-18</td>
</tr>
<tr>
	<td>14</td>
	<td>559.6</td>
	<td>Bob</td>
	<td>$55.14</td>
	<td>2015-07-15</td>
</tr>
<tr class="alternate">
	<td>15</td>
	<td>851.9</td>
	<td>Matt</td>
	<td>$7.13</td>
	<td>2014-10-20</td>
</tr>
<tr>
	<td>16</td>
	<td>315.1</td>
	<td>Bill</td>
	<td>$1.93</td>
	<td>2016-03-02</td>
</tr>
<tr class="alternate">
	<td>17</td>
	<td>597.9</td>
	<td>Joe</td>
	<td>$72.54</td>
	<td>2014-02-08</td>
</tr>
<tr>
	<td>18</td>
	<td>535.3</td>
	<td>Bob</td>
	<td>$24.54</td>
	<td>2015-11-05</td>
</tr>
<tr class="alternate">
	<td>19</td>
	<td>322.2</td>
	<td>Matt</td>
	<td>$77.64</td>
	<td>2016-04-19</td>
</tr>
<tr>
	<td>20</td>
	<td>958.2</td>
	<td>Bill</td>
	<td>$86.84</td>
	<td>2015-06-27</td>
</tr>
<tr class="alternate">
	<td>21</td>
	<td>3.6</td>
	<td>Joe</td>
	<td>$59.44</td>
	<td>2014-07-21</td>
</tr>
<tr>
	<td>22</td>
	<td>761.7</td>
	<td>Bob</td>
	<td>$15.64</td>
	<td>2014-06-14</td>
</tr>
<tr class="alternate">
	<td>23</td>
	<td>741.5</td>
	<td>Matt</td>
	<td>$5.73</td>
	<td>2014-06-05</td>
</tr>
<tr>
	<td>24</td>
	<td>631.5</td>
	<td>Bill</td>
	<td>$61.64</td>
	<td>2016-03-04</td>
</tr>
<tr class="alternate">
	<td>25</td>
	<td>386.9</td>
	<td>Joe</td>
	<td>$46.84</td>
	<td>2013-03-25</td>
</tr>
<tr>
	<td>26</td>
	<td>910</td>
	<td>Bob</td>
	<td>$78.34</td>
	<td>2013-04-15</td>
</tr>
<tr class="alternate">
	<td>27</td>
	<td>864.9</td>
	<td>Matt</td>
	<td>$38.14</td>
	<td>2015-08-03</td>
</tr>
<tr>
	<td>28</td>
	<td>169</td>
	<td>Bill</td>
	<td>$91.74</td>
	<td>2013-03-12</td>
</tr>
<tr class="alternate">
	<td>29</td>
	<td>21.6</td>
	<td>Joe</td>
	<td>$23.94</td>
	<td>2015-08-27</td>
</tr>
<tr>
	<td>30</td>
	<td>17.6</td>
	<td>Bob</td>
	<td>$19.74</td>
	<td>2015-03-27</td>
</tr>
<tr class="alternate">
	<td>31</td>
	<td>756.7</td>
	<td>Matt</td>
	<td>$20.04</td>
	<td>2013-12-12</td>
</tr>
<tr>
	<td>32</td>
	<td>201.2</td>
	<td>Bill</td>
	<td>$96.24</td>
	<td>2014-06-10</td>
</tr>
<tr class="alternate">
	<td>33</td>
	<td>614.2</td>
	<td>Joe</td>
	<td>$70.34</td>
	<td>2014-08-15</td>
</tr>
<tr>
	<td>34</td>
	<td>19.5</td>
	<td>Bob</td>
	<td>$33.54</td>
	<td>2013-05-28</td>
</tr>
<tr class="alternate">
	<td>35</td>
	<td>975.7</td>
	<td>Matt</td>
	<td>$72.24</td>
	<td>2014-11-21</td>
</tr>
<tr>
	<td>36</td>
	<td>3.1</td>
	<td>Bill</td>
	<td>$63.24</td>
	<td>2014-03-15</td>
</tr>
<tr class="alternate">
	<td>37</td>
	<td>48.9</td>
	<td>Joe</td>
	<td>$49.64</td>
	<td>2015-05-30</td>
</tr>
<tr>
	<td>38</td>
	<td>820.1</td>
	<td>Bob</td>
	<td>$66.54</td>
	<td>2015-02-22</td>
</tr>
<tr class="alternate">
	<td>39</td>
	<td>836.3</td>
	<td>Matt</td>
	<td>$68.74</td>
	<td>2015-11-25</td>
</tr>
<tr>
	<td>40</td>
	<td>628.5</td>
	<td>Bill</td>
	<td>$70.54</td>
	<td>2013-05-10</td>
</tr>
<tr class="alternate">
	<td>41</td>
	<td>288.1</td>
	<td>Joe</td>
	<td>$46.14</td>
	<td>2013-12-27</td>
</tr>
<tr>
	<td>42</td>
	<td>541.6</td>
	<td>Bob</td>
	<td>$66.24</td>
	<td>2013-11-13</td>
</tr>
<tr class="alternate">
	<td>43</td>
	<td>950.7</td>
	<td>Matt</td>
	<td>$27.64</td>
	<td>2016-02-05</td>
</tr>
<tr>
	<td>44</td>
	<td>416.7</td>
	<td>Bill</td>
	<td>$29.64</td>
	<td>2013-12-27</td>
</tr>
<tr class="alternate">
	<td>45</td>
	<td>499.2</td>
	<td>Joe</td>
	<td>$27.14</td>
	<td>2016-04-11</td>
</tr>
<tr>
	<td>46</td>
	<td>49.9</td>
	<td>Bob</td>
	<td>$27.44</td>
	<td>2015-02-09</td>
</tr>
<tr class="alternate">
	<td>47</td>
	<td>383.8</td>
	<td>Matt</td>
	<td>$32.34</td>
	<td>2013-07-06</td>
</tr>
<tr>
	<td>48</td>
	<td>98.9</td>
	<td>Bill</td>
	<td>$14.34</td>
	<td>2015-08-16</td>
</tr>
<tr class="alternate">
	<td>49</td>
	<td>730.5</td>
	<td>Joe</td>
	<td>$98.04</td>
	<td>2014-08-18</td>
</tr>
<tr>
	<td>50</td>
	<td>600.7</td>
	<td>Bob</td>
	<td>$60.84</td>
	<td>2013-09-10</td>
</tr>
<tr class="alternate">
	<td>51</td>
	<td>667.6</td>
	<td>Matt</td>
	<td>$89.64</td>
	<td>2015-02-26</td>
</tr>
<tr>
	<td>52</td>
	<td>934.7</td>
	<td>Bill</td>
	<td>$43.84</td>
	<td>2014-01-31</td>
</tr>
<tr class="alternate">
	<td>53</td>
	<td>163.7</td>
	<td>Joe</td>
	<td>$38.84</td>
	<td>2014-12-17</td>
</tr>
<tr>
	<td>54</td>
	<td>96.1</td>
	<td>Bob</td>
	<td>$80.54</td>
	<td>2015-11-24</td>
</tr>
<tr class="alternate">
	<td>55</td>
	<td>363.3</td>
	<td>Matt</td>
	<td>$30.44</td>
	<td>2013-08-03</td>
</tr>
<tr>
	<td>56</td>
	<td>352</td>
	<td>Bill</td>
	<td>$35.44</td>
	<td>2014-06-17</td>
</tr>
<tr class="alternate">
	<td>57</td>
	<td>972.4</td>
	<td>Joe</td>
	<td>$73.84</td>
	<td>2015-06-26</td>
</tr>
<tr>
	<td>58</td>
	<td>89.2</td>
	<td>Bob</td>
	<td>$83.74</td>
	<td>2015-12-09</td>
</tr>
<tr class="alternate">
	<td>59</td>
	<td>871.3</td>
	<td>Matt</td>
	<td>$56.74</td>
	<td>2015-11-15</td>
</tr>
<tr>
	<td>60</td>
	<td>340.5</td>
	<td>Bill</td>
	<td>$16.84</td>
	<td>2014-08-19</td>
</tr>
<tr class="alternate">
	<td>61</td>
	<td>514.1</td>
	<td>Joe</td>
	<td>$83.54</td>
	<td>2014-04-20</td>
</tr>
<tr>
	<td>62</td>
	<td>148.9</td>
	<td>Bob</td>
	<td>$77.04</td>
	<td>2015-09-09</td>
</tr>
<tr class="alternate">
	<td>63</td>
	<td>446</td>
	<td>Matt</td>
	<td>$93.44</td>
	<td>2013-10-01</td>
</tr>
<tr>
	<td>64</td>
	<td>19.4</td>
	<td>Bill</td>
	<td>$3.03</td>
	<td>2016-04-20</td>
</tr>
<tr class="alternate">
	<td>65</td>
	<td>888.7</td>
	<td>Joe</td>
	<td>$39.34</td>
	<td>2014-02-04</td>
</tr>
<tr>
	<td>66</td>
	<td>29.5</td>
	<td>Bob</td>
	<td>$74.54</td>
	<td>2015-03-21</td>
</tr>
<tr class="alternate">
	<td>67</td>
	<td>444.7</td>
	<td>Matt</td>
	<td>$71.74</td>
	<td>2014-05-21</td>
</tr>
<tr>
	<td>68</td>
	<td>183.2</td>
	<td>Bill</td>
	<td>$80.64</td>
	<td>2013-11-13</td>
</tr>
<tr class="alternate">
	<td>69</td>
	<td>65</td>
	<td>Joe</td>
	<td>$67.84</td>
	<td>2015-09-01</td>
</tr>
<tr>
	<td>70</td>
	<td>926.5</td>
	<td>Bob</td>
	<td>$1.83</td>
	<td>2016-03-13</td>
</tr>
<tr class="alternate">
	<td>71</td>
	<td>395.9</td>
	<td>Matt</td>
	<td>$53.24</td>
	<td>2015-09-04</td>
</tr>
<tr>
	<td>72</td>
	<td>761.5</td>
	<td>Bill</td>
	<td>$68.14</td>
	<td>2014-12-12</td>
</tr>
<tr class="alternate">
	<td>73</td>
	<td>564.7</td>
	<td>Joe</td>
	<td>$12.74</td>
	<td>2014-09-26</td>
</tr>
<tr>
	<td>74</td>
	<td>756.2</td>
	<td>Bob</td>
	<td>$14.64</td>
	<td>2014-10-30</td>
</tr>
<tr class="alternate">
	<td>75</td>
	<td>752.7</td>
	<td>Matt</td>
	<td>$3.53</td>
	<td>2016-01-28</td>
</tr>
<tr>
	<td>76</td>
	<td>53.4</td>
	<td>Bill</td>
	<td>$6.43</td>
	<td>2015-04-07</td>
</tr>
<tr class="alternate">
	<td>77</td>
	<td>708</td>
	<td>Joe</td>
	<td>$50.94</td>
	<td>2014-05-15</td>
</tr>
<tr>
	<td>78</td>
	<td>100.3</td>
	<td>Bob</td>
	<td>$69.24</td>
	<td>2013-10-03</td>
</tr>
<tr class="alternate">
	<td>79</td>
	<td>329.3</td>
	<td>Matt</td>
	<td>$75.74</td>
	<td>2015-11-26</td>
</tr>
<tr>
	<td>80</td>
	<td>125.4</td>
	<td>Bill</td>
	<td>$68.34</td>
	<td>2015-12-16</td>
</tr>
<tr class="alternate">
	<td>81</td>
	<td>89.1</td>
	<td>Joe</td>
	<td>$7.93</td>
	<td>2014-06-23</td>
</tr>
<tr>
	<td>82</td>
	<td>888.1</td>
	<td>Bob</td>
	<td>$84.14</td>
	<td>2013-06-19</td>
</tr>
<tr class="alternate">
	<td>83</td>
	<td>456.9</td>
	<td>Matt</td>
	<td>$40.54</td>
	<td>2013-11-12</td>
</tr>
<tr>
	<td>84</td>
	<td>959.3</td>
	<td>Bill</td>
	<td>$16.14</td>
	<td>2014-05-01</td>
</tr>
<tr class="alternate">
	<td>85</td>
	<td>491.3</td>
	<td>Joe</td>
	<td>$91.44</td>
	<td>2014-06-10</td>
</tr>
<tr>
	<td>86</td>
	<td>416</td>
	<td>Bob</td>
	<td>$96.84</td>
	<td>2014-08-24</td>
</tr>
<tr class="alternate">
	<td>87</td>
	<td>85.6</td>
	<td>Matt</td>
	<td>$67.54</td>
	<td>2016-04-04</td>
</tr>
<tr>
	<td>88</td>
	<td>472.2</td>
	<td>Bill</td>
	<td>$77.64</td>
	<td>2015-04-13</td>
</tr>
<tr class="alternate">
	<td>89</td>
	<td>665.2</td>
	<td>Joe</td>
	<td>$10.54</td>
	<td>2014-07-06</td>
</tr>
<tr>
	<td>90</td>
	<td>535.6</td>
	<td>Bob</td>
	<td>$23.04</td>
	<td>2013-07-05</td>
</tr>
<tr class="alternate">
	<td>91</td>
	<td>424</td>
	<td>Matt</td>
	<td>$31.94</td>
	<td>2013-10-05</td>
</tr>
<tr>
	<td>92</td>
	<td>844.4</td>
	<td>Bill</td>
	<td>$20.84</td>
	<td>2013-04-03</td>
</tr>
<tr class="alternate">
	<td>93</td>
	<td>945.8</td>
	<td>Joe</td>
	<td>$66.44</td>
	<td>2014-07-16</td>
</tr>
<tr>
	<td>94</td>
	<td>174.1</td>
	<td>Bob</td>
	<td>$62.44</td>
	<td>2015-01-19</td>
</tr>
<tr class="alternate">
	<td>95</td>
	<td>548.6</td>
	<td>Matt</td>
	<td>$11.54</td>
	<td>2014-10-12</td>
</tr>
<tr>
	<td>96</td>
	<td>958</td>
	<td>Bill</td>
	<td>$53.14</td>
	<td>2014-09-04</td>
</tr>
<tr class="alternate">
	<td>97</td>
	<td>431.8</td>
	<td>Joe</td>
	<td>$61.64</td>
	<td>2013-08-25</td>
</tr>
<tr>
	<td>98</td>
	<td>414.5</td>
	<td>Bob</td>
	<td>$8.83</td>
	<td>2016-02-08</td>
</tr>
<tr class="alternate">
	<td>99</td>
	<td>89.4</td>
	<td>Matt</td>
	<td>$75.44</td>
	<td>2013-04-08</td>
</tr>
<tr>
	<td>100</td>
	<td>521.3</td>
	<td>Bill</td>
	<td>$28.94</td>
	<td>2013-12-31</td>
</tr>
<tr class="alternate">
	<td>101</td>
	<td>636.6</td>
	<td>Joe</td>
	<td>$71.34</td>
	<td>2015-01-05</td>
</tr>
<tr>
	<td>102</td>
	<td>831.2</td>
	<td>Bob</td>
	<td>$55.84</td>
	<td>2015-09-02</td>
</tr>
<tr class="alternate">
	<td>103</td>
	<td>866.6</td>
	<td>Matt</td>
	<td>$50.34</td>
	<td>2014-08-09</td>
</tr>
<tr>
	<td>104</td>
	<td>307.4</td>
	<td>Bill</td>
	<td>$67.74</td>
	<td>2013-05-31</td>
</tr>
</tbody>
<tfoot>
<tr>
	<td>tfoot</td>
	<td>tfoot</td>
	<td>tfoot</td>
	<td>tfoot</td>
	<td>tfoot</td>
</tr>
<tr>
	<td class="table-page:previous" style="cursor:pointer;">&lt; &lt; Previous</td>
	<td colspan="3" style="text-align:center;">Page <span id="t1page"></span>&nbsp;of <span id="t1pages"></span></td>
	<td class="table-page:next" style="cursor:pointer;">Next &gt; &gt;</td>
</tr>
<tr>
	<td colspan="5"><span id="t1filtercount"></span>&nbsp;of <span id="t1allcount"></span>&nbsp;rows match filter(s)</td>
</tfoot>
</table>

<br>

<table id="t2" class="example altstripe sort01 table-autostripe table-autosort:2 table-stripeclass:alternate2">
<thead>
<tr>
	<th class="table-filterable table-sortable:numeric">Index</th>
	<th class="table-sortable:numeric">Numeric</th>
	<th class="table-filterable table-sortable:default">Text</th>
	<th class="table-sortable:currency">Currency</th>
	<th class="table-sortable:date">Date</th>
</tr>
</thead>
<tbody>
<tr>
	<td>0</td>
	<td>909.6</td>
	<td>Bill</td>
	<td>$22.64</td>
	<td>2013-10-10</td>
</tr>
<tr>
	<td>1</td>
	<td>426</td>
	<td>Joe</td>
	<td>$18.44</td>
	<td>2015-06-17</td>
</tr>
<tr>
	<td>2</td>
	<td>909.9</td>
	<td>Bob</td>
	<td>$61.64</td>
	<td>2014-03-30</td>
</tr>
<tr>
	<td>3</td>
	<td>69.1</td>
	<td>Matt</td>
	<td>$3.03</td>
	<td>2014-07-10</td>
</tr>
<tr>
	<td>4</td>
	<td>4</td>
	<td>Mark</td>
	<td>$11.94</td>
	<td>2013-09-28</td>
</tr>
<tr>
	<td>5</td>
	<td>44</td>
	<td>Tom</td>
	<td>$64.14</td>
	<td>2014-08-28</td>
</tr>
<tr>
	<td>6</td>
	<td>314.2</td>
	<td>Jake</td>
	<td>$27.74</td>
	<td>2013-09-30</td>
</tr>
<tr>
	<td>7</td>
	<td>903.8</td>
	<td>Greg</td>
	<td>$10.84</td>
	<td>2015-07-08</td>
</tr>
<tr>
	<td>8</td>
	<td>700.9</td>
	<td>Adam</td>
	<td>$97.54</td>
	<td>2013-12-10</td>
</tr>
<tr>
	<td>9</td>
	<td>162.3</td>
	<td>Steve</td>
	<td>$28.24</td>
	<td>2016-02-01</td>
</tr>
</tbody>
<tfoot>
<tr>
	<td>tfoot</td>
	<td>tfoot</td>
	<td>tfoot</td>
	<td>tfoot</td>
	<td>tfoot</td>
</tr>
</tfoot>
</table>
</div>
</div>
</td>
<td class="right" id="googleAds">
<script type="text/javascript"><!--
google_ad_client = "pub-9155030588311591";
/* 120x600, created 3/16/09 */
google_ad_slot = "5069391977";
google_ad_width = 120;
google_ad_height = 600;
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
</tr>
<tr>
<td class="footer" colspan="3"><img src="/bullet-bolt.gif" alt="Logo">&nbsp;All Contents Copyright &copy; <a href="http://www.mattkruse.com/">Matt Kruse</a></td>
</tr>
</table>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6382940-7");
pageTracker._trackPageview();
} catch(err) {}</script>


</body>
</html>
最近更新されたスレッド
ウィキ募集バナー