当前位置: 代码迷 >> Web前端 >> 强大jQuery ui.ariaSorTable兑现排序、分页的表格
  详细解决方案

强大jQuery ui.ariaSorTable兑现排序、分页的表格

热度:488   发布时间:2012-11-12 12:31:58.0
强大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&#252;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 />&#220;ber diese Lizenz hinausgehende Erlaubnisse erhalten Sie m&#246;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>

?

  相关解决方案