想要在Jquery中改进Pagination的代码功能

时间：2016-04-20 06:24:39

标签： javascript jquery

我已经制作了具有排序选项的表，它也具有分页功能。但问题只有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>

请帮帮我......

0 个答案:

没有答案
相关问题
最新问题