在HTML中放置与寻呼机内联的按钮
问题描述 投票：0回答：2
我有一个分页表，我试图在表格下面添加一个按钮，但是按钮显示在寻呼机下方，但是我希望它显示在页面的左侧但与寻呼机位于同一行
我也为此创造了一个小提琴。 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>2个回答
0
投票
投票
更改按钮的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>0
投票
投票
我已经编辑了你的.pager课程。
div.pager {
float: right;
text-align: right;
width: 33em;
margin: 1em auto;
}
我把你的桌子和按钮括在一个分区内，如下所示：
<center>
<div style="width:40em;">
<table class="paginated">
...
</table>
</div>
</center>
最新问题
- 千篇一律：为提示指定变量的最简单方法是什么
- 错误 Appium 2：无法启动新会话
- React Native 0.74.0 Android 构建失败“找不到符号导入 com.facebook.react.fabric.FabricJSIModuleProvider”
- xpath 选择<p><a></a></p>，但不选择<p>sometext<a>link</a>或某些文本</p>
- 从 Python 调用 C++ 中执行 Python 的函数会出现 free() 无效指针错误
- Pandas 中的数据集需要多少 RAM？
- 使用express和multer在node.js中创建文件夹时出错
- Xamarin 表单 OnBackButtonPressed 自升级以来未在 Android 上触发
- 如何在SUMIF中排除多个值？
- 无法通过SSH使用GIT
- TypeScript 类型级编程：检查对象是否至少有两个字段
- NextJS 公共环境变量不适用于 Azure 应用服务
- 在 MYSQL 中的两个不同表中使用 like 比较两列的最快方法，五十万行
- 我们如何从剧作家中具有多个 div 标签的下拉列表中选择随机文本？
- Spotify API 客户端获取播放列表曲目偏移量
- Pandas 中的 RAM 使用情况
- Azure Application Insights 不显示 C# ILogger 日志
- 在 PyQt5 中将主行计数器作为第一列/文本添加到 QTreeView 中？
- 找不到模块：错误：无法解析“framework7/lite-bundle”
- 连接两个时间戳不相同的 MySQL 表
© www.soinside.com 2019 - 2024. All rights reserved.