对具有多个<tbody>元素
Paginating a table with multiple <tbody> elements?
假设我有一个这样的表:
<table>
<thead>
<tr><th>Customer</th><th>Order</th><th>Month</th></tr>
</thead>
<tbody>
<tr><td>Customer 1</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 1</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 1</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody>
<tr><td>Customer 2</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 2</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 2</td><td>#3</td><td>March</td></tr>
</tbody>
<tbody>
<tr><td>Customer 3</td><td>#1</td><td>January</td></tr>
<tr><td>Customer 3</td><td>#2</td><td>April</td></tr>
<tr><td>Customer 3</td><td>#3</td><td>March</td></tr>
</tbody>
....
.... 1000s of records like this
</table>
是否有一种方法可以基于tbody
元素分页?例如,我想显示第1页上的前50条记录,以此类推。是否有一个jQuery插件已经做到了这一点,或者我应该写自己的?有什么建议吗?
图例,
jQuery分页插件- nice find.
这里有一种方法可以使用插件来做更接近你最初要求的事情。
$(document).ready(function () {
var $tbodies = $("#myTable tbody");
// Create pagination element with options from form
var paginationOpts = {
callback: pageselectCallback,
items_per_page: 5,
num_display_entries: 10,
num_edge_entries: 2,
prev_text: "Prev",
next_text: "Next"
};
function pageselectCallback(page_index, jq) {
//calculate limits of the page in terms of tbody indices
var limits = {
start: page_index * paginationOpts.items_per_page,
end: (page_index + 1) * paginationOpts.items_per_page
};
$tbodies.filter(":visible").hide();
$tbodies.slice(limits.start, limits.end).show();
// Prevent click eventpropagation
return false;
}
$("#Pagination").pagination($tbodies.length, paginationOpts);
});
我不是说这样更好。对于1000+ tbody, HTML可能非常庞大,页面转换可能非常慢,但是如果您没有修改数据提供的方式,这种方法可以节省开发时间。
可能将来对某人有用。
演示最有效的方法是在服务器端实现分页。
正如评论中所说,数据表似乎是你最好的选择。我也可以考虑SlickGrid
请注意,您可以使用这些api选择客户端或服务器端分页
我通过一个名为jQuery Pagination plugin的轻量级插件实现了这一功能。
如果有人感兴趣,这里有一个演示。
HTML:<div id="Pagination" class="pagination"></div>
<br style="clear:both" />
<table id="Searchresult"></table>
JS:
var members = [
// Any data array
];
var n = "";
function pageselectCallback(page_index, jq) {
// Get number of elements per pagionation page from form
var items_per_page = 5;
var max_elem = Math.min((page_index + 1) * items_per_page, members.length);
var newcontent = '';
// Iterate through a selection of the content and build an HTML string
newcontent = "<table>";
for (var i = page_index * items_per_page; i < max_elem; i++) {
newcontent += '<tbody><tr><td>' + members[i][0] + '</td></tr>';
newcontent += '<tr><td class="state">' + members[i][2] + '</td>';
newcontent += '<td class="party">' + members[i][3] + '</td></tr></tbody>';
}
newcontent += "</table>";
// Replace old content with new content
$('#Searchresult').html(newcontent);
// Prevent click eventpropagation
return false;
}
$(document).ready(function () {
// Create pagination element with options from form
var opt = {
callback: pageselectCallback
};
opt.items_per_page = 5;
opt.num_display_entries = 10;
opt.num_edge_entries = 2;
opt.prev_text = "Prev";
opt.next_text = "Next";
$("#Pagination").pagination(members.length, opt);
});
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何设置html元素填充的动画
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 表追加而不附加最后一个元素
- 如何在jQuery中获取元素的形式
- 我可以获得相对于被点击元素的确切点击位置吗
- 在函数中添加数组元素的数值
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 将视口底部滚动到元素底部
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 如何使用jquery处理php循环通过元素
- 将表行动态添加到表或tbody元素中
- 使用Ajax呈现具有多个tbody元素的HTML表
- 如何检查父元素是tbody还是thead
- 折叠具有多个tbody元素的表行
- jQuery IE 9在替换"tbody"时崩溃;值,单击其中的元素后