强大jQuery ui.ariaSorTable实现排序、分页的表格
jQuery ui.ariaSorTable 支持分页的表格组件，想实现无刷新分页的朋友一定要看看这个jQuery ui插件，为你实现多功能表格提供有一份有力参考。除分页外，本表格组件支持表格双击表头排序，简单方便，推荐给大家。
前端代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="language" content="DE, AT, CH" scheme="DCTERMS.RFC3066" />
<meta name="creator" content="Felix Nagel, http://www.felixnagel.com for Namics (Deutschland) GmbH, http://www.namics.com" />
<title>ui.ariaSorTable - jQuery UI by http://www.jscss8.com</title>
<link type="text/css" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
<link type="text/css" href="css/style.css" rel="stylesheet" />
<!--[if gte IE 6]>
<style type="text/css">@import url(css/style_ie.css);</style>
<![endif]-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/ui.core.js"></script>
<script type="text/javascript" src="js/ui.ariaSorTable.js"></script>
<script type="text/javascript" src="js/demo.js"></script>
<script type="text/javascript">
$(function() {
var table1 = $("table").ariaSorTable({
rowsToShow: 10,
pager: true,
onInit: function() {
demoControl();
},
colsToHide: {
1: true,
7: true
}
});
$("#destroy").click(function (event) {
table1.ariaSorTable('destroy');
});
$("#disable").click(function (event) {
table1.ariaSorTable('disable');
});
});
</script>
</head>
<body>
<h1>jQuery UI - ui.ariaSorTable</h1>
<div id="controls">
<a href="performance.html">Performance Demo</a> | <a href="#" id="destroy">destroy</a> | <a href="#" id="disable">disable</a>
</div>
<div id="wrapper">
<div id="table-wrapper">
<table summary="This table holds sample data to test sorting and paging. Please feel free to sort colums by cicking their headers and see all data by clicking at the pager.">
<caption class="ui-state-highlight ui-corner-all">Functional demo table</caption>
<thead>
<tr>
<th class="ui-table-asc ui-state-active ui-table-number" style="min-width: 4.2em;"><a href="#server_site_order">UID</a></th>
<th class="ui-table-number" style="min-width: 10em;"><a href="#server_site_order">Number</a></th>
<th class="ui-table-number-de" style="min-width: 10em;">Decimal DE</th>
<th class="ui-table-number" style="min-width: 6em;"><a href="#server_site_order">Decimal</a></th>
<th class="ui-table-date-de" style="min-width: 8em;"><a href="#server_site_order">Date DE</a></th>
<th class="ui-table-date-iso ui-table-deactivate" style="min-width: 8em;"><a href="#server_site_order">Date ISO</a></th>
<th class="ui-table-text" style="min-width: 10em;"><a href="#server_site_order">String</a></th>
<th class="ui-table-deactivate" style="min-width: 12em;"><a href="#server_site_order_only">false</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>111112</td>
<td>119,111</td>
<td>111.231</td>
<td>01.01.2009</td>
<td>2009-01-01</td>
<td>abcdefghijk</td>
<td>Lorum ipsum</td>
</tr>
<tr>
<td>2</td>
<td>131112</td>
<td>119,131</td>
<td>311.231</td>
<td>01.03.2009</td>
<td>2009-03-01</td>
<td><a href="#test">test link</a></td>
<td>Sorum ipsum</td>
</tr>
<tr>
<td>3</td>
<td>13144562</td>
<td>11459,131</td>
<td>31.231</td>
<td>02.03.09</td>
<td>2009-03-02</td>
<td>rwzkjgjk</td>
<td>Sdrum ipsum</td>
</tr>
<tr>
<td>4</td>
<td>17662</td>
<td>11459,131</td>
<td>31.551</td>
<td>23.03.09</td>
<td>2009-03-23</td>
<td>rwzkjgasjk</td>
<td>Adrum ipsum</td>
</tr>
<tr>
<td>5</td>
<td>1232</td>
<td>2259,131</td>
<td>11.551</td>
<td>28.03.2009</td>
<td>2009-03-28</td>
<td>egfgfsjk</td>
<td>ioom ipsum</td>
</tr>
<tr>
<td>6</td>
<td>3452</td>
<td>231239,1321</td>
<td>61.661</td>
<td>28.07.2009</td>
<td>2009-07-28</td>
<td>egffghgfsjk</td>
<td>ioio fgpsum</td>
</tr>
<tr>
<td>7</td>
<td>862</td>
<td>39,1321</td>
<td>6.661</td>
<td>28.12.2009</td>
<td>2009-12-28</td>
<td>hgjgfsjk</td>
<td>Ipsum Lorem fgpsum</td>
</tr>
<tr>
<td>8</td>
<td>24342</td>
<td>13,1321</td>
<td>3.661</td>
<td>01.12.2009</td>
<td>2009-12-01</td>
<td>abcdefgh</td>
<td>Tipsum Lorem fgpsum</td>
</tr>
<tr>
<td>9</td>
<td>123456</td>
<td>12,3321</td>
<td>31.021</td>
<td>05.12.2003</td>
<td>2003-12-05</td>
<td>ab212efgh</td>
<td>Tertrem fgpsum</td>
</tr>
<tr>
<td>10</td>
<td>1456</td>
<td>0,3321</td>
<td>1.91</td>
<td>12.12.2003</td>
<td>2003-12-12</td>
<td>btzhhgghgh</td>
<td>Berum test fom</td>
</tr>
<tr>
<td>11</td>
<td>111112</td>
<td>119,111</td>
<td>111.231</td>
<td>01.01.2009</td>
<td>2009-01-01</td>
<td>a</td>
<td>Lorum ipsum</td>
</tr>
<tr>
<td>12</td>
<td>131112</td>
<td>119,131</td>
<td>311.231</td>
<td>01.03.2009</td>
<td>2009-03-01</td>
<td>b</td>
<td>Sorum ipsum</td>
</tr>
<tr>
<td>13</td>
<td>13144562</td>
<td>11459,131</td>
<td>31.231</td>
<td>02.03.2009</td>
<td>2009-03-02</td>
<td>c</td>
<td>Sdrum ipsum</td>
</tr>
<tr>
<td>14</td>
<td>17662</td>
<td>11459,131</td>
<td>31.551</td>
<td>23.03.2009</td>
<td>2009-03-23</td>
<td>d</td>
<td>Adrum ipsum</td>
</tr>
<tr>
<td>15</td>
<td>1232</td>
<td>2259,131</td>
<td>11.551</td>
<td>28.03.2009</td>
<td>2009-03-28</td>
<td>e</td>
<td>ioom ipsum</td>
</tr>
<tr>
<td>16</td>
<td>3452</td>
<td>231239,1321</td>
<td>61.661</td>
<td>28.07.2009</td>
<td>2009-07-28</td>
<td>f</td>
<td>ioio fgpsum</td>
</tr>
<tr>
<td>17</td>
<td>862</td>
<td>39,1321</td>
<td>6.661</td>
<td>28.12.2009</td>
<td>2009-12-28</td>
<td>g</td>
<td>Ipsum Lorem fgpsum</td>
</tr>
<tr>
<td>18</td>
<td>24342</td>
<td>13,1321</td>
<td>3.661</td>
<td>01.12.2009</td>
<td>2009-12-01</td>
<td>h</td>
<td>Tipsum Lorem fgpsum</td>
</tr>
<tr>
<td>19</td>
<td>123456</td>
<td>12,3321</td>
<td>31.021</td>
<td>05.12.2003</td>
<td>2003-12-05</td>
<td>i</td>
<td>Tertrem fgpsum</td>
</tr>
<tr>
<td>20</td>
<td>1456</td>
<td>0,3321</td>
<td>1.91</td>
<td>12.12.2003</td>
<td>2003-12-12</td>
<td>j</td>
<td>Berum fom</td>
</tr>
<tr>
<td>21</td>
<td>111112</td>
<td>119,111</td>
<td>111.231</td>
<td>01.01.2009</td>
<td>2009-01-01</td>
<td>abcdefghijk</td>
<td>Lorum ipsum</td>
</tr>
<tr>
<td>22</td>
<td>131112</td>
<td>119,131</td>
<td>311.231</td>
<td>01.03.2009</td>
<td>2009-03-01</td>
<td>abmjmkjgjk</td>
<td>Sorum ipsum</td>
</tr>
<tr>
<td>23</td>
<td>13144562</td>
<td>11459,131</td>
<td>31.231</td>
<td>02.03.2009</td>
<td>2009-03-02</td>
<td>rwzkjgjk</td>
<td>Sdrum ipsum</td>
</tr>
<tr>
<td>24</td>
<td>17662</td>
<td>11459,131</td>
<td>31.551</td>
<td>23.03.2009</td>
<td>2009-03-23</td>
<td>rwzkjgasjk</td>
<td>Adrum ipsum</td>
</tr>
<tr>
<td>25</td>
<td>1232</td>
<td>2259,131</td>
<td>11.551</td>
<td>28.03.2009</td>
<td>2009-03-28</td>
<td>egfgfsjk</td>
<td>ioom ipsum</td>
</tr>
<tr>
<td>26</td>
<td>3452</td>
<td>231239,1321</td>
<td>61.661</td>
<td>28.07.2009</td>
<td>2009-07-28</td>
<td>egffghgfsjk</td>
<td>ioio fgpsum</td>
</tr>
<tr>
<td>27</td>
<td>862</td>
<td>39,1321</td>
<td>6.661</td>
<td>28.12.2009</td>
<td>2009-12-28</td>
<td>hgjgfsjk</td>
<td>Ipsum Lorem fgpsum</td>
</tr>
<tr>
<td>28</td>
<td>24342</td>
<td>13,1321</td>
<td>3.661</td>
<td>01.12.2009</td>
<td>2009-12-01</td>
<td>abcdefgh</td>
<td>Tipsum Lorem fgpsum</td>
</tr>
<tr>
<td>29</td>
<td>123456</td>
<td>12,3321</td>
<td>31.021</td>
<td>05.12.2003</td>
<td>2003-12-05</td>
<td>ab212efgh</td>
<td>Tertrem fgpsum</td>
</tr>
<tr>
<td>30</td>
<td>1456</td>
<td>0,3321</td>
<td>1.91</td>
<td>12.12.2003</td>
<td>2003-12-12</td>
<td>btzhhgghgh</td>
<td>Berum fom</td>
</tr>
<tr>
<td>31</td>
<td>111112</td>
<td>119,111</td>
<td>111.231</td>
<td>01.01.2009</td>
<td>2009-01-01</td>
<td>abcdefghijk</td>
<td>Lorum ipsum</td>
</tr>
<tr>
<td>32</td>
<td>131112</td>
<td>119,131</td>
<td>311.231</td>
<td>01.03.2009</td>
<td>2009-03-01</td>
<td>abmjmkjgjk</td>
<td>Sorum ipsum</td>
</tr>
<tr>
<td>33</td>
<td>13144562</td>
<td>11459,131</td>
<td>31.231</td>
<td>02.03.2009</td>
<td>2009-03-02</td>
<td>rwzkjgjk</td>
<td>Sdrum ipsum</td>
</tr>
<tr>
<td>34</td>
<td>17662</td>
<td>11459,131</td>
<td>31.551</td>
<td>23.03.2009</td>
<td>2009-03-23</td>
<td>rwzkjgasjk</td>
<td>Adrum ipsum</td>
</tr>
<tr>
<td>35</td>
<td>1232</td>
<td>2259,131</td>
<td>11.551</td>
<td>28.03.2009</td>
<td>2009-03-28</td>
<td>egfgfsjk</td>
<td>ioom ipsum</td>
</tr>
<tr>
<td>36</td>
<td>3452</td>
<td>231239,1321</td>
<td>61.661</td>
<td>28.07.2009</td>
<td>2009-07-28</td>
<td>egffghgfsjk</td>
<td>ioio fgpsum</td>
</tr>
<tr>
<td>37</td>
<td>862</td>
<td>39,1321</td>
<td>6.661</td>
<td>28.12.2009</td>
<td>2009-12-28</td>
<td>hgjgfsjk</td>
<td>Ipsum Lorem fgpsum</td>
</tr>
<tr>
<td>38</td>
<td>24342</td>
<td>13,1321</td>
<td>3.661</td>
<td>01.12.2009</td>
<td>2009-12-01</td>
<td>abcdefgh</td>
<td>Tipsum Lorem fgpsum</td>
</tr>
<tr>
<td>39</td>
<td>123456</td>
<td>12,3321</td>
<td>31.021</td>
<td>05.12.2003</td>
<td>2003-12-05</td>
<td>ab212efgh</td>
<td>Tertrem fgpsum</td>
</tr>
<tr>
<td>40</td>
<td>1456</td>
<td>0,3321</td>
<td>1.91</td>
<td>12.12.2003</td>
<td>2003-12-12</td>
<td>btzhhgghgh</td>
<td>Berum fom</td>
</tr>
<tr>
<td>41</td>
<td>111112</td>
<td>119,111</td>
<td>111.231</td>
<td>01.01.2009</td>
<td>2009-01-01</td>
<td>abcdefghijk</td>
<td>Lorum ipsum</td>
</tr>
<tr>
<td>42</td>
<td>131112</td>
<td>119,131</td>
<td>311.231</td>
<td>01.03.2009</td>
<td>2009-03-01</td>
<td>abmjmkjgjk</td>
<td>Sorum ipsum test</td>
</tr>
<tr>
<td>43</td>
<td>13144562</td>
<td>11459,131</td>
<td>31.231</td>
<td>02.03.2009</td>
<td>2009-03-02</td>
<td>rwzkjgjk</td>
<td>Sdrum ipsum</td>
</tr>
<tr>
<td>44</td>
<td>17662</td>
<td>11459,131</td>
<td>31.551</td>
<td>23.03.2009</td>
<td>2009-03-23</td>
<td>rwzkjgasjk</td>
<td>Adrum ipsum</td>
</tr>
<tr>
<td>45</td>
<td>1232</td>
<td>2259,131</td>
<td>11.551</td>
<td>28.03.2009</td>
<td>2009-03-28</td>
<td>egfgfsjk test #</td>
<td>ioom ipsum</td>
</tr>
<tr>
<td>46</td>
<td>3452</td>
<td>231239,1321</td>
<td>61.661</td>
<td>28.07.2009</td>
<td>2009-07-28</td>
<td>egffghgfsjk</td>
<td>ioio fgpsum</td>
</tr>
<tr>
<td>47</td>
<td>862</td>
<td>39,1321</td>
<td>6.661</td>
<td>28.12.2009</td>
<td>2009-12-28</td>
<td>hgjgfsjk</td>
<td>Ipsum Lorem fgpsum</td>
</tr>
<tr>
<td>48</td>
<td>24342</td>
<td>13,1321</td>
<td>3.661</td>
<td>01.12.2009</td>
<td>2009-12-01</td>
<td>abcdefgh</td>
<td>Tipsum Lorem fgpsum</td>
</tr>
<tr>
<td>49</td>
<td>123456</td>
<td>12,3321</td>
<td>31.021</td>
<td>05.12.2003</td>
<td>2003-12-05</td>
<td>ab212efgh</td>
<td>Tertrem fgpsum test</td>
</tr>
<tr>
<td>50</td>
<td>1456</td>
<td>0,3321</td>
<td>1.91</td>
<td>12.12.2003</td>
<td>2003-12-12</td>
<td>btzhhgghgh</td>
<td>Berum fom</td>
</tr>
<tr>
<td>51</td>
<td>111112</td>
<td>119,111</td>
<td>111.231</td>
<td>01.01.2009</td>
<td>2009-01-01</td>
<td>abcdefghijk</td>
<td>Lorum ipsum</td>
</tr>
<tr>
<td>52</td>
<td>131112</td>
<td>119,131</td>
<td>311.231</td>
<td>01.03.2009</td>
<td>2009-03-01</td>
<td>abmjmkjgjk</td>
<td>Sorum ipsum</td>
</tr>
<tr>
<td>53</td>
<td>13144562</td>
<td>11459,131</td>
<td>31.231</td>
<td>02.03.2009</td>
<td>2009-03-02</td>
<td>rwzkjgjk</td>
<td>Sdrum ipsum</td>
</tr>
<tr>
<td>54</td>
<td>17662</td>
<td>11459,131</td>
<td>31.551</td>
<td>23.03.2009</td>
<td>2009-03-23</td>
<td>rwzkjgasjk</td>
<td>Adrum ipsum</td>
</tr>
<tr>
<td>55</td>
<td>1232</td>
<td>2259,131</td>
<td>11.551</td>
<td>28.03.2009</td>
<td>2009-03-28</td>
<td>egfgfsjk</td>
<td>ioom ipsum</td>
</tr>
<tr>
<td>56</td>
<td>3452</td>
<td>231239,1321</td>
<td>61.661</td>
<td>28.07.2009</td>
<td>2009-07-28</td>
<td>egffghgfsjk</td>
<td>ioio fgpsum</td>
</tr>
<tr>
<td>57</td>
<td>862</td>
<td>39,1321</td>
<td>6.661</td>
<td>28.12.2009</td>
<td>2009-12-28</td>
<td>hgjgfsjk</td>
<td>Ipsum Lorem fgpsum</td>
</tr>
<tr>
<td>58</td>
<td>24342</td>
<td>13,1321</td>
<td>3.661</td>
<td>01.12.2009</td>
<td>2009-12-01</td>
<td>abcdefgh</td>
<td>Tipsum Lorem fgpsum</td>
</tr>
<tr>
<td>59</td>
<td>123456</td>
<td>12,3321</td>
<td>31.021</td>
<td>05.12.2003</td>
<td>2003-12-05</td>
<td>ab212efgh</td>
<td>Tertrem fgpsum</td>
</tr>
<tr>
<td>60</td>
<td>1456</td>
<td>0,3321</td>
<td>1.91</td>
<td>12.12.2003</td>
<td>2003-12-12</td>
<td>btzhhgghgh</td>
<td>Berum fom</td>
</tr>
<tr>
<td>61</td>
<td>1456</td>
<td>0,3321</td>
<td>1.91</td>
<td>12.12.2003</td>
<td>2003-12-12</td>
<td>btzhhgghgh</td>
<td>Berum fom</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="copyright">
<a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by-sa/3.0/80x15.png" /></a><br />Diese(s) Werk bzw. Inhalt von <span xmlns:cc="http://creativecommons.org/ns#" property="cc:attributionName">Felix Nagel für Namics (Deutschland) GmbH</span> steht unter einer <a rel="license" href="http://creativecommons.org/licenses/by-sa/3.0/">Creative Commons Namensnennung-Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz</a>.<br />Über diese Lizenz hinausgehende Erlaubnisse erhalten Sie möglicherweise unter <a xmlns:cc="http://creativecommons.org/ns#" href="http://www.felixnagel.com" rel="cc:morePermissions">http://www.felixnagel.com</a>.
</div>
</body>
</html>