Question

我有一个分页的表格，我试图在表格下方添加一个按钮，但是该按钮在分页器下方显示，但是我希望它显示在页面的左侧，但与分页器在同一行< / p>

我也为此创建了一个小提琴。 http://jsfiddle.net/8fpxche0/1/

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

    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 > <p>Export to CSV</p></button>

Answer 1

像这样更改按钮的HTML：

<button id="csvExport" >Export to CSV</button>

然后添加以下几行JavaScript代码：

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

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

http://jsfiddle.net/8fpxche0/11/

Answer 2

我已经编辑了您的.pager类。

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

我已将您的桌子和按钮放在如下的一个分隔中：

<center>
    <div style="width:40em;">
        <table class="paginated">
            ...
        </table>
    </div>
</center>

将按钮与传呼程序内嵌在HTML中

2 个答案: