我已经制作了具有排序选项的表,它也具有分页功能。但问题只有Next,Last,Previous和First。我想要它也应该在页面上显示页码和总页数。
我尝试通过添加它来获取页码按钮,但问题是点击它们时它不会进入页面。实际上我从某个地方复制了分页,所以我无法正确地完成它。
工作代码在这里
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://tablesorter.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://tablesorter.com/__jquery.tablesorter.js"></script>
<script type="text/javascript" src="http://tablesorter.com/addons/pager/jquery.tablesorter.pager.js"></script>
<script type="text/javascript" src="http://tablesorter.com/docs/js/chili/chili-1.8b.js"></script>
<script type="text/javascript" src="http://tablesorter.com/docs/js/docs.js"></script>
<script type="text/javascript" src="http://flaviusmatis.github.io/simplePagination.js/jquery.simplePagination.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("table")
.tablesorter({widthFixed: true, widgets: ['zebra']})
.tablesorterPager({container: $(".tablesorter")});
});
</script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<table id="myTable" class="" style="width:50%">
<thead>
<tr>
<th><span>ID</span></th>
<th><span>Name</span></th>
<tr>
<tbody>
<td>1</td>
<td>Jill</td>
</tr>
<tr>
<td>2</td>
<td>Bill</td>
</tr>
<tr>
<td>3</td>
<td>Chill</td>
</tr>
<tr>
<td>4</td>
<td>Adam</td>
</tr>
<tr>
<td>5</td>
<td>Andrea</td>
</tr>
<tr>
<td>6</td>
<td>Stephen</td>
</tr>
<tr>
<td>7</td>
<td>Rose</td>
</tr>
<tr>
<td>8</td>
<td>Chuck</td>
</tr>
<tr>
<td>9</td>
<td>Barney</td>
</tr>
<tr>
<td>10</td>
<td>Alan</td>
</tr>
<tr>
<td>11</td>
<td>Ted</td>
</tr>
<tr>
<td>12</td>
<td >Simon</td>
</tr>
<tr>
<td>13</td>
<td >Simon</td>
</tr>
<tr>
<td>14</td>
<td >Larry</td>
</tr>
<tr>
<td>15</td>
<td >Harry</td>
</tr>
<tr>
<td>16</td>
<td >Ron</td>
</tr>
<tr>
<td>17</td>
<td>George</td>
</tr>
<td >18</td>
<td>John</td>
</tr>
<tr>
<td>19</td>
<td>Jay</td>
</tr>
<tr>
<td>20</td>
<td>Laura</td>
</tr>
<tr>
<td>21</td>
<td>Michael</td>
</tr>
<tr>
<td>22</td>
<td>George</td>
</tr>
<td >23</td>
<td>John</td>
</tr>
<tr>
<td>24</td>
<td>Jay</td>
</tr>
<tr>
<td>25</td>
<td>Laura</td>
</tr>
<tr>
<td>26</td>
<td>Michael</td>
</tr>
<tr>
<td>27</td>
<td>George</td>
</tr>
<td >28</td>
<td>John</td>
</tr>
<tr>
<td>29</td>
<td>Jay</td>
</tr>
<tr>
<td>30</td>
<td>Laura</td>
</tr>
<tr>
<td>31</td>
<td>Michael</td>
</tr>
<tr>
<td>32</td>
<td>George</td>
</tr>
<td >33</td>
<td>John</td>
</tr>
<tr>
<td>34</td>
<td>Jay</td>
</tr>
<tr>
<td>35</td>
<td>Laura</td>
</tr>
<tr>
<td>36</td>
<td>Michael</td>
</tr>
<tr>
<td>37</td>
<td>George</td>
</tr>
<td >38</td>
<td>John</td>
</tr>
<tr>
<td>39</td>
<td>Jay</td>
</tr>
<tr>
<td>40</td>
<td>Laura</td>
</tr>
<tr>
<td>41</td>
<td>Michael</td>
</tr>
<tr>
<td>42</td>
<td>George</td>
</tr>
<td >43</td>
<td>John</td>
</tr>
<tr>
<td>44</td>
<td>Jay</td>
</tr>
<tr>
<td>45</td>
<td>Laura</td>
</tr>
<tr>
<td>46</td>
<td>Michael</td>
</tr>
<tr>
<td>47</td>
<td>George</td>
</tr>
<td >48</td>
<td>John</td>
</tr>
<tr>
<td>49</td>
<td>Jay</td>
</tr>
<tr>
<td>50</td>
<td>Laura</td>
</tr>
<tr>
<td>51</td>
<td>Michael</td>
</tr>
<tr>
<td>52</td>
<td>George</td>
</tr>
<td >53</td>
<td>John</td>
</tr>
<tr>
<td>54</td>
<td>Jay</td>
</tr>
<tr>
<td>55</td>
<td>Laura</td>
</tr>
<tr>
<td>56</td>
<td>Michael</td>
</tr>
<tr>
<td>57</td>
<td>George</td>
</tr>
<td >58</td>
<td>John</td>
</tr>
<tr>
<td>59</td>
<td>Jay</td>
</tr>
<tr>
<td>60</td>
<td>Laura</td>
</tr>
<tr>
<td>61</td>
<td>Michael</td>
</tr>
<tr>
<td>62</td>
<td>George</td>
</tr>
<tr>
<td >63</td>
<td>John</td>
</tr>
<tr>
<td>64</td>
<td>Jay</td>
</tr>
<tr>
<td>65</td>
<td>Laura</td>
</tr>
<tr>
<td>66</td>
<td>Michael</td>
</tr>
<tr>
<td>67</td>
<td>George</td>
</tr>
<td >68</td>
<td>John</td>
</tr>
<tr>
<td>69</td>
<td>Jay</td>
</tr>
<tr>
<td>70</td>
<td>Laura</td>
</tr>
<tr>
<td>71</td>
<td>Michael</td>
</tr>
<tr>
<td >72</td>
<td>John</td>
</tr>
<tr>
<td>73</td>
<td>Jay</td>
</tr>
<tr>
<td>74</td>
<td>Jay</td>
</tr>
<tr>
<td>75</td>
<td>Laura</td>
</tr>
<tr>
<td>76</td>
<td>Michael</td>
</tr>
<tr>
<td>77</td>
<td>George</td>
</tr>
<td >78</td>
<td>John</td>
</tr>
<tr>
<td>79</td>
<td>Jay</td>
</tr>
<tr>
<td>80</td>
<td>Laura</td>
</tr>
<tr>
<td>81</td>
<td>Michael</td>
</tr>
<tr>
<td >82</td>
<td>John</td>
</tr>
<tr>
<td >83</td>
<td>John</td>
</tr>
<tr>
<td>84</td>
<td>Jay</td>
</tr>
<tr>
<td>85</td>
<td>Laura</td>
</tr>
<tr>
<td>86</td>
<td>Michael</td>
</tr>
<tr>
<td>87</td>
<td>George</td>
</tr>
<td >88</td>
<td>John</td>
</tr>
<tr>
<td>89</td>
<td>Jay</td>
</tr>
<tr>
<td>90</td>
<td>Laura</td>
</tr>
<tr>
<td>91</td>
<td>Michael</td>
</tr>
<tr>
<td>92</td>
<td>Michael</td>
</tr>
<tr>
<td >93</td>
<td>John</td>
</tr>
<tr>
<td>94</td>
<td>Jay</td>
</tr>
<tr>
<td>95</td>
<td>Laura</td>
</tr>
<tr>
<td>96</td>
<td>Michael</td>
</tr>
<tr>
<td>97</td>
<td>George</td>
</tr>
<td >98</td>
<td>John</td>
</tr>
<tr>
<td>99</td>
<td>Jay</td>
</tr>
<tr>
<td>100</td>
<td>Laura</td>
</tr>
</tbody>
</table>
<div id="pager" class="tablesorter" style="top: 900px; position: absolute;">
<form>
<img src="http://tablesorter.com/addons/pager/icons/first.png" class="first">
<img src="http://tablesorter.com/addons/pager/icons/prev.png" class="prev">
<img src="http://tablesorter.com/addons/pager/icons/next.png" class="next">
<img src="http://tablesorter.com/addons/pager/icons/last.png" class="last">
<select class="pagesize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
</select>
</form>
</div>
</body>
</html>
请帮帮我......