我正在使用j查询在HTML表中进行分页。我能够实现分页，但是当前文本中显示“下一个”，“上一个”，“下一个”，“最后一个”（请检查小提琴），我想将其显示为按钮，我不确定如何实现它。请帮忙。
我也想将寻呼机移到桌子的右上角。请帮忙。
我为此创建了一个小提琴，这是它的链接。
http://jsfiddle.net/q6u0rdsc/1/
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>');
$('<span class="pg-goto"></span>').text(' « First ').bind('click', function () {
currentPage = 0;
$table.trigger('repaginate');
}).appendTo(pager);
$('<span class="pg-goto"> « Prev </span>').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++) {
$('<span id="pg' + page + '" class="' + (page == currentPage ? 'pg-selected' : 'pg-normal') + '"></span>').text(page + 1).bind('click', {
newPage: page
}, function (event) {
currentPage = event.data['newPage'];
$table.trigger('repaginate');
}).appendTo(pager);
}
$('<span class="pg-goto"> Next » </span>').bind('click', function () {
if (currentPage < pages - 1)
currentPage++;
$table.trigger('repaginate');
}).appendTo(pager);
$('<span class="pg-goto"> Last » </span>').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');
});
答案 0 :(得分：0)
您可以像这样在按钮上添加一些CSS代码样式
.pager .pg-goto {background: #000; color: #fff; margin: 0 2px; padding: 3px; border-radius: 3px;}
您可以在此处查看fiddle
答案 1 :(得分：0)
您可以将span标签更改为button标签：
updated fiddle