jQuery plugin: Tablesorter 2.0

http://mottie.github.io/tablesorter/docs/example-pager.html
http://tablesorter.com/docs/example-pager.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title>

	<!-- jQuery -->
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

	<!-- Demo stuff -->
	<link rel="stylesheet" href="css/jq.css"/>
	<link href="css/prettify.css" rel="stylesheet"/>
	<script type="text/javascript" src="js/prettify.js"></script>
	<script type="text/javascript" src="js/docs.js"></script>

	<!-- Tablesorter: required -->
	<link rel="stylesheet" href="themes/blue/theme.blue.css"/>
	<script type="text/javascript" src="js/jquery.tablesorter.js"></script>

	<!-- Tablesorter: optional -->
	<link rel="stylesheet" href="css/jquery.tablesorter.pager.css"/>
	<script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script>

	<script type="text/javascript" src="js/settablepage.js" id="js"></script>

</head>

<body>
<div class="pager">
		<img src="scripts/first.png" class="first" alt="First" />
		<img src="scripts/prev.png" class="prev" alt="Prev" />
		<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
		<img src="scripts/next.png" class="next" alt="Next" />
		<img src="scripts/last.png" class="last" alt="Last" />
		<select class="pagesize" title="Select page size">
			<option value="10">10</option>
			<option value="20">20</option>
			<option value="30">30</option>
			<option value="40">40</option>
		</select>
		<select class="gotoPage" title="Select page number"></select>
	</div>
<table class="tablesorter">
	<thead>
		<tr>
			<th>Name</th>
			<th>Major</th>
			<th>Sex</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>
			<th class="remove sorter-false"></th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Name</th>
			<th>Major</th>
			<th>Sex</th>
			<th>English</th>
			<th>Japanese</th>
			<th>Calculus</th>
			<th>Geometry</th>
			<th></th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Student01</td>
			<td>Languages</td>
			<td>male</td>
			<td>80</td>
			<td>70</td>
			<td>75</td>
			<td>80</td>
			<td></td>
		</tr>
		<tr>
			<td>Student02</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>90</td>
			<td>88</td>
			<td>100</td>
			<td>90</td>
			<td></td>
		</tr>
		<tr>
			<td>Student03</td>
			<td>Languages</td>
			<td>female</td>
			<td>85</td>
			<td>95</td>
			<td>80</td>
			<td>85</td>
			<td></td>
		</tr>
		<tr>
			<td>Student04</td>
			<td>Languages</td>
			<td>male</td>
			<td>60</td>
			<td>55</td>
			<td>100</td>
			<td>100</td>
			<td></td>
		</tr>
		<tr>
			<td>Student05</td>
			<td>Languages</td>
			<td>female</td>
			<td>68</td>
			<td>80</td>
			<td>95</td>
			<td>80</td>
			<td></td>
		</tr>
		<tr>
			<td>Student06</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>100</td>
			<td>99</td>
			<td>100</td>
			<td>90</td>
			<td></td>
		</tr>
		<tr>
			<td>Student07</td>
			<td>Mathematics</td>
			<td>male</td>
			<td>85</td>
			<td>68</td>
			<td>90</td>
			<td>90</td>
			<td></td>
		</tr>
		<tr>
			<td>Student08</td>
			<td>Languages</td>
			<td>male</td>
			<td>100</td>
			<td>90</td>
			<td>90</td>
			<td>85</td>
			<td></td>
		</tr>
	<tr><td>Student23</td><td>塗聚文</td><td>男</td><td>82</td><td>77</td><td>0</td><td>79</td><td></td></tr>
		<tr><td>Student24</td><td>劉亮</td><td>女</td><td>100</td><td>91</td><td>13</td><td>82</td><td></td></tr>
		<tr><td>Student25</td><td>涂聚文</td><td>男</td><td>22</td><td>96</td><td>82</td><td>53</td><td></td></tr>
		<tr><td>Student26</td><td>曾用名</td><td>女</td><td>37</td><td>29</td><td>56</td><td>59</td><td></td></tr>
		<tr><td>Student27</td><td>一落千丈</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td><td></td></tr>
		<tr><td>Student28</td><td>共青团</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td><td></td></tr>
		<tr><td>Student29</td><td>生龙活虎</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td><td></td></tr>
		<tr><td>Student30</td><td>语言</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td><td></td></tr>
		<tr><td>Student31</td><td>物理</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td><td></td></tr>
		<tr><td>Student32</td><td>物色</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td><td></td></tr>
		<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td><td></td></tr>
		<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td><td></td></tr>
		<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td><td></td></tr>
		<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td><td></td></tr>
		<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td><td></td></tr>
		<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td><td></td></tr>
		<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td><td></td></tr>
		<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td><td></td></tr>
		<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td><td></td></tr>
		<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td><td></td></tr>
		<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td><td></td></tr>
		<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td><td></td></tr>
		<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td><td></td></tr>
		<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td><td></td></tr>
		<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td><td></td></tr>
		<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td><td></td></tr>
		<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td><td></td></tr>
		<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td><td></td></tr>

</tbody>
</table>

<div class="pager">
	<img src="scripts/first.png" class="first" alt="First" />
	<img src="scripts/prev.png" class="prev" alt="Prev" />
	<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
	<img src="scripts/next.png" class="next" alt="Next" />
	<img src="scripts/last.png" class="last" alt="Last" />
	<select class="pagesize" title="Select page size">
		<option value="10">10</option>
		<option value="20">20</option>
		<option value="30">30</option>
		<option value="40">40</option>
	</select>
	<select class="gotoPage" title="Select page number"></select>
</div>
</body>

</html>

 

posted @ 2013-07-18 18:23  ®Geovin Du Dream Park™  阅读(643)  评论(0)  编辑  收藏  举报