在页面的顶部和底部添加寻呼机

时间：2018-07-26 10:19:29

标签： javascript jquery html pagination pager

我在表中添加了一个寻呼机，它在表的底部或顶部显示了该寻呼机。但是我想在页面的顶部和底部显示传呼机。

我在下面尝试过，但是没有用

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');
});

1 个答案:

答案 0 :(得分：0)

仅添加insertBefore将不起作用。由于您要在同一个寻呼机对象上调用insertAfter和insertBefore，因此该寻呼机将首先插入，然后插入，然后再插入，最后插入到before。

您需要先clone，然后插入beforeBefore。

$('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);
      if (!$table.prev().hasClass("pager"))
        pager.clone(true, true).insertBefore($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');
});
table {
  width: 40em;
  margin: 2em auto;
}

thead {
  background: #000;
  color: #fff;
}

td {
  width: 10em;
  padding: 0.3em;
}

tbody {
  background: #ccc;
}

div.pager {
  text-align: center;
  margin: 1em 0;
}

div.pager {
  text-align: center;
  margin: 1em 0;
}

div.pg-goto {
  color: #000000;
  font-size: 15px;
  cursor: pointer;
  background: #D0B389;
  padding: 2px 4px 2px 4px;
}

div.pg-selected {
  color: #fff;
  font-size: 15px;
  background: #000000;
  padding: 2px 4px 2px 4px;
}

div.pg-normal {
  color: #000000;
  font-size: 15px;
  cursor: pointer;
  background: #D0B389;
  padding: 2px 4px 2px 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

提琴：http://jsfiddle.net/grrakesh4769/q6u0rdsc/38/

更新：

您已经完成了对原始寻呼机的所有重新计算，而不是对克隆寻呼机的重新计算；因此，可以更改选择器以同时包含这两个选择器，并且每次都重新构建两个选择器，或者简单地替换克隆（如果已存在）。我已经用替换逻辑更新了小提琴：http://jsfiddle.net/grrakesh4769/q6u0rdsc/44/

相关问题
最新问题