在寻呼机中单击“下一步”时，按钮消失-表分页

时间：2018-09-17 13:56:28

标签： jquery html

我正在将一个按钮与表格寻呼机串联，但是当我单击寻呼机中的下一个按钮时，该按钮消失了，我不确定发生了什么。

我创建了一个fiddle for this。这是我正在使用的代码：

$table.trigger('repaginate');
var pager = document.querySelector('.pager');
pager.insertBefore(csvExport, pager.querySelector(':first-child'));
csvExport.style.float = 'left';

2 个答案:

答案 0 :(得分：0)

pager = $table.next().empty();

您要清空寻呼机并仅添加分页按钮，而不添加导出按钮。

答案 1 :(得分：0)

这是因为您将csv按钮移到了分页器div中，然后清空了div，仅重新创建了分页器按钮，而不是csv按钮。

删除以下行即可，但是您必须重新设置导出按钮的样式才能位于正确的位置：

pager.insertBefore(csvExport, pager.querySelector(':first-child'));


$('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++) {
        $('<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);
      }

      $('<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');
  var pager = document.querySelector('.pager');
  //  pager.insertBefore(csvExport, pager.querySelector(':first-child')); remove this line
  csvExport.style.float = 'left';
});
table {
  width: 40em;
  margin: 2em auto;
}

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

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

tbody {
  background: #ccc;
}

div.pager {
  text-align: right;
  width: 40em;
  margin: 1em auto;
}

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>
<button id="csvExport">Export to CSV</button>

相关问题
最新问题