【发布时间】：2018-07-27 02:19:11
【问题描述】：
我在表格中添加了一个寻呼机，它在表格底部或顶部显示寻呼机。但我想在页面的顶部和底部显示寻呼机。
我在下面尝试过，但它不起作用
pager.insertBefore($table);
我为此创建了fiddle
HTML 代码
<table class="paginated">
<thead>
<tr>
<th scope="col">A</th>
<th scope="col">B</th>
<th scope="col">C</th>
<th scope="col">D</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>17</td>
<td>18</td>
<td>19</td>
<td>20</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
<tr>
<td>25</td>
<td>26</td>
<td>27</td>
<td>28</td>
</tr>
<tr>
<td>29</td>
<td>30</td>
<td>31</td>
<td>32</td>
</tr>
<tr>
<td>33</td>
<td>34</td>
<td>35</td>
<td>36</td>
</tr>
<tr>
<td>37</td>
<td>38</td>
<td>39</td>
<td>40</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
<td>34</td>
</tr>
<tr>
<td>45</td>
<td>46</td>
<td>47</td>
<td>48</td>
</tr>
<tr>
<td>49</td>
<td>50</td>
<td>51</td>
<td>52</td>
</tr>
<tr>
<td>53</td>
<td>54</td>
<td>55</td>
<td>56</td>
</tr>
<tr>
<td>57</td>
<td>58</td>
<td>59</td>
<td>60</td>
</tr>
<tr>
<td>61</td>
<td>62</td>
<td>63</td>
<td>64</td>
</tr>
<tr>
<td>65</td>
<td>66</td>
<td>67</td>
<td>68</td>
</tr>
<tr>
<td>69</td>
<td>70</td>
<td>71</td>
<td>72</td>
</tr>
<tr>
<td>73</td>
<td>74</td>
<td>75</td>
<td>76</td>
</tr>
<tr>
<td>77</td>
<td>78</td>
<td>79</td>
<td>80</td>
</tr>
<tr>
<td>81</td>
<td>82</td>
<td>83</td>
<td>84</td>
</tr>
<tr>
<td>85</td>
<td>86</td>
<td>87</td>
<td>88</td>
</tr>
<tr>
<td>89</td>
<td>90</td>
<td>91</td>
<td>92</td>
</tr>
<tr>
<td>93</td>
<td>94</td>
<td>95</td>
<td>96</td>
</tr>
<tr>
<td>97</td>
<td>98</td>
<td>99</td>
<td>100</td>
</tr>
<tr>
<td>101</td>
<td>102</td>
<td>103</td>
<td>104</td>
</tr>
<tr>
<td>105</td>
<td>106</td>
<td>107</td>
<td>108</td>
</tr>
<tr>
<td>109</td>
<td>110</td>
<td>111</td>
<td>112</td>
</tr>
<tr>
<td>113</td>
<td>114</td>
<td>115</td>
<td>116</td>
</tr>
<tr>
<td>117</td>
<td>118</td>
<td>119</td>
<td>120</td>
</tr>
<tr>
<td>121</td>
<td>122</td>
<td>123</td>
<td>124</td>
</tr>
<tr>
<td>125</td>
<td>126</td>
<td>127</td>
<td>128</td>
</tr>
<tr>
<td>129</td>
<td>130</td>
<td>131</td>
<td>132</td>
</tr>
<tr>
<td>134</td>
<td>135</td>
<td>136</td>
<td>137</td>
</tr>
<tr>
<td>138</td>
<td>139</td>
<td>140</td>
<td>141</td>
</tr>
<tr>
<td>142</td>
<td>143</td>
<td>144</td>
<td>145</td>
</tr>
<tr>
<td>146</td>
<td>147</td>
<td>148</td>
<td>149</td>
</tr>
<tr>
<td>150</td>
<td>151</td>
<td>152</td>
<td>153</td>
</tr>
<tr>
<td>154</td>
<td>155</td>
<td>156</td>
<td>157</td>
</tr>
<tr>
<td>158</td>
<td>159</td>
<td>160</td>
<td>161</td>
</tr>
<tr>
<td>162</td>
<td>163</td>
<td>164</td>
<td>165</td>
</tr>
<tr>
<td>166</td>
<td>167</td>
<td>168</td>
<td>169</td>
</tr>
<tr>
<td>170</td>
<td>171</td>
<td>172</td>
<td>173</td>
</tr>
<tr>
<td>174</td>
<td>175</td>
<td>176</td>
<td>177</td>
</tr>
<tr>
<td>178</td>
<td>179</td>
<td>180</td>
<td>181</td>
</tr>
<tr>
<td>182</td>
<td>183</td>
<td>184</td>
<td>185</td>
</tr>
<tr>
<td>186</td>
<td>187</td>
<td>188</td>
<td>189</td>
</tr>
<tr>
<td>190</td>
<td>191</td>
<td>192</td>
<td>193</td>
</tr>
<tr>
<td>194</td>
<td>195</td>
<td>196</td>
<td>197</td>
</tr>
<tr>
<td>198</td>
<td>199</td>
<td>200</td>
<td>201</td>
</tr>
</tbody>
</table>
jQuery
$('table.paginated').each(function () {
var $table = $(this);
var itemsPerPage = 10;
var currentPage = 0;
var pages = Math.ceil($table.find("tr:not(:has(th))").length / itemsPerPage);
$table.bind('repaginate', function () {
if (pages > 1) {
var pager;
if ($table.next().hasClass("pager"))
pager = $table.next().empty(); else
pager = $('<div class="pager" style="padding-top: 20px; direction:ltr; " align="center"></div>');
$('<button class="pg-goto"></button>').text(' « First ').bind('click', function () {
currentPage = 0;
$table.trigger('repaginate');
}).appendTo(pager);
$('<button class="pg-goto"> « Prev </button>').bind('click', function () {
if (currentPage > 0)
currentPage--;
$table.trigger('repaginate');
}).appendTo(pager);
var startPager = currentPage > 2 ? currentPage - 2 : 0;
var endPager = startPager > 0 ? currentPage + 3 : 5;
if (endPager > pages) {
endPager = pages;
startPager = pages - 5; if (startPager < 0)
startPager = 0;
}
for (var page = startPager; page < endPager; page++) {
$('<button id="pg' + page + '" class="' + (page == currentPage ? 'pg-selected' : 'pg-normal') + '"></button>').text(page + 1).bind('click', {
newPage: page
}, function (event) {
currentPage = event.data['newPage'];
$table.trigger('repaginate');
}).appendTo(pager);
}
$('<button class="pg-goto"> Next » </button>').bind('click', function () {
if (currentPage < pages - 1)
currentPage++;
$table.trigger('repaginate');
}).appendTo(pager);
$('<button class="pg-goto"> Last » </button>').bind('click', function () {
currentPage = pages - 1;
$table.trigger('repaginate');
}).appendTo(pager);
if (!$table.next().hasClass("pager"))
pager.insertAfter($table);
//pager.insertBefore($table);
}// end $table.bind('repaginate', function () { ...
$table.find(
'tbody tr:not(:has(th))').hide().slice(currentPage * itemsPerPage, (currentPage + 1) * itemsPerPage).show();
});
$table.trigger('repaginate');
});
【问题讨论】：
标签： javascript jquery html pagination pager