使用行跨度对数据表进行分页 [英] Paginate datatables with rowspans
问题描述
我在使用行跨度对数据表进行分页时遇到了一些问题.我的问题是，当指示pageLength"时属性，它考虑所有 trs.例如，如果我有这样的东西，我需要使用 "pageLength": 3.
--------------------------------------------|tr 与 rowspan = 2 |tr里面#1|----------------------||tr里面#2-----------------------------------------我的问题是，由于这个原因，当沿着表格的不同页面进行分页时，可能会发生某些 trs 最终成为孤儿"的情况.例如，如果页面以 tr #1 结束，则 tr #2 可能会单独"出现在页面上.(没有 tr 与 rowspan = 2)在下一页.有没有办法只考虑那些父"表来对这些表进行分页?行，带行跨度的行吗?
我不知道有什么方法可以完全满足您的要求.话虽如此，我在下面提供了一些注释，以防它们是可接受的替代方案.
您可以创建一个假的 rowspan 效果，无论您在哪个页面上，它都会始终在第一列中显示相关值:
但即便如此，您仍可能在页面底部的跨度中获得一些行，而在下一页的顶部获得跨度的其余行.我看不出有任何解决办法(除了本答案末尾提到的一种可能情况).
作为替代方案，您可能需要查看 row group 扩展.但是，同样不能保证整个组总是只出现在一页上.
如果假行跨度"你感兴趣，这是一个例子.它通过操作每个页面上的 DOM 节点来工作，因此不会显示第一列中的重复值(并且删除了单元格的 border-top 行).
DataTable 中的数据本身没有改变，所以如果你搜索Edinburgh"您仍会找到所有 3 条记录.
var dataSet = {数据": [{"id": "1","name": "老虎尼克松","position": "系统架构师","salary": "$320,800","开始日期": "2011/04/25","office": "爱丁堡",分机":5421"},{"id": "2","name": "加勒特温特斯","position": "会计师","salary": "$170,750","开始日期": "2011/07/25","office": "东京",分机":8422"},{"id": "3","name": "阿什顿考克斯","position": "初级技术作者","salary": "$86,000","开始日期": "2009/01/12","office": "东京",分机":1562"},{"id": "4","name": "塞德里克·凯利","position": "高级 Javascript 开发人员","salary": "$433,060","开始日期": "2012/03/29","office": "纽约",分机":6224"},{"id": "5","name": "佐藤爱理","position": "会计师","salary": "$162,700","开始日期": "2008/11/28","office": "东京",分机":5407"},{"id": "6","name": "布丽尔·威廉姆森","position": "集成专家","salary": "$372,000","开始日期": "2012/12/02","office": "纽约",分机":4804"},{"id": "7","name": "赫罗德钱德勒","position": "销售助理","salary": "$137,500","开始日期": "2012/08/06","office": "旧金山",分机":9608"},{"id": "8","name": "罗娜·戴维森","position": "集成专家","salary": "$327,900","开始日期": "2010/10/14","office": "东京",分机":6200"},{"id": "9","name": "科琳·赫斯特","position": "Javascript 开发人员","salary": "$205,500","开始日期": "2009/09/15","office": "旧金山",分机":2360"},{"id": "10","name": "索尼娅弗罗斯特","position": "软件工程师","salary": "$103,600","开始日期": "2008/12/13","office": "爱丁堡",分机":1667"},{"id": "11","name": "耶拿盖恩斯","position": "办公室经理","salary": "$90,560","开始日期": "2008/12/19","office": "伦敦",分机":3814"},{"id": "12","name": "奎因·弗林","position": "支持领导","salary": "$342,000","开始日期": "2013/03/03","office": "爱丁堡",分机":9497"}]};无功前 = '';$(document).ready(function() {var table = $('#example').DataTable({数据:dataSet.data，"顺序": [[ 0, 'asc' ]],列: [{标题:办公室"，数据:办公室"}，{标题:姓名"，数据:姓名"}，//{ title: "Office2", data: "office" },{标题:位置"，数据:位置"}，{标题:开始日期"，数据:开始日期"}，{标题:薪水"，数据:薪水"}],initComplete":函数(设置，json){//如果初始排序顺序导致//需要修改的单元格:processColumnNodes( $('#example').DataTable() );}});table.on('画'，函数(){processColumnNodes( $('#example').DataTable() );});函数 processColumnNodes(tbl) {//参见 https://datatables.net/reference/type/selector-modifiervar selector_modifier = { order: 'current', page: 'current', search: 'applied' }无功前 = '';var officeNodes = tbl.column(0, selector_modifier).nodes();var officeData = tbl.column(0, selector_modifier).data();for (var i = 0; i < officeData.length; i++) {var current = officeData[i];如果(当前 === 前一个){officeNodes[i].textContent = '';officeNodes[i].setAttribute("style", "border-top:none;");} 别的 {officeNodes[i].textContent = 当前；}上一个 = 当前；}}}); <script src="https://code.jquery.com/jquery-3.5.1.js"></脚本><script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css"><link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css"><div style="margin: 20px;"><table id="example" class="cell-border" style="width:100%">当您运行上述代码段时，您将看到Tokyo"的 4 行中的 2 行.在第 1 页的末尾.您将在第 2 页的顶部看到 2 个剩余的(孤立的")东京行 - 但您也会看到东京"行.标签也是如此.
如果您的 rowspan 大小始终正好是2"然后您还可以设置页面长度"中的值.仅使用偶数的下拉菜单:
lengthMenu":[ 10, 20, 50, 100 ]那样你就永远不会有任何孤儿"分成不同的页面.
I am having some issues for paginating a datatable with rowspans. My issue is that, when indicating the "pageLength" atttribute, it considers all trs. For example, if I have something like this, I would need to use "pageLength": 3.
--------------------------------------------
|
tr with rowspan = 2 | tr inside #1
|----------------------
|
| tr inside #2
--------------------------------------------
My problem here is that, due to this, when paging along the different pages of the table, it can happen that some trs end up being "orphan". For example, if the page ends with the tr #1, the tr #2 may appear "alone" (without the tr with rowspan = 2) on the next page. Is there any way to paginate these tables only taking into account those "parent" rows, the one with rowspan?
I don't know of a way to do exactly what you are asking. Having said that, I provide some notes below in case they are an acceptable alternative.
You can create a fake rowspan effect, which will always display the relevant value in the first column, regardless of which page you are on:
But even with this, you may still get some rows in the span at the bottom of one page, and the remainder of the span's rows at the top of the next page. I do not see any way around that (except for one possible scenario mentioned at the end of this answer).
As an alternative, you may want to look into the row group extension. But, again there are no guarantees that an entire group will always appear on only one page.
If the "fake rowspan" is of interest to you, here is an example. It works by manipulating the DOM nodes on each page, so that repeated values in the first column are not shown (and the cell's border-top line is removed).
The data in the DataTable itself is not altered, so if you search for "Edinburgh" you will still find all 3 records.
var dataSet = {
"data": [
{
"id": "1",
"name": "Tiger Nixon",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"id": "2",
"name": "Garrett Winters",
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25",
"office": "Tokyo",
"extn": "8422"
},
{
"id": "3",
"name": "Ashton Cox",
"position": "Junior Technical Author",
"salary": "$86,000",
"start_date": "2009/01/12",
"office": "Tokyo",
"extn": "1562"
},
{
"id": "4",
"name": "Cedric Kelly",
"position": "Senior Javascript Developer",
"salary": "$433,060",
"start_date": "2012/03/29",
"office": "New York",
"extn": "6224"
},
{
"id": "5",
"name": "Airi Satou",
"position": "Accountant",
"salary": "$162,700",
"start_date": "2008/11/28",
"office": "Tokyo",
"extn": "5407"
},
{
"id": "6",
"name": "Brielle Williamson",
"position": "Integration Specialist",
"salary": "$372,000",
"start_date": "2012/12/02",
"office": "New York",
"extn": "4804"
},
{
"id": "7",
"name": "Herrod Chandler",
"position": "Sales Assistant",
"salary": "$137,500",
"start_date": "2012/08/06",
"office": "San Francisco",
"extn": "9608"
},
{
"id": "8",
"name": "Rhona Davidson",
"position": "Integration Specialist",
"salary": "$327,900",
"start_date": "2010/10/14",
"office": "Tokyo",
"extn": "6200"
},
{
"id": "9",
"name": "Colleen Hurst",
"position": "Javascript Developer",
"salary": "$205,500",
"start_date": "2009/09/15",
"office": "San Francisco",
"extn": "2360"
},
{
"id": "10",
"name": "Sonya Frost",
"position": "Software Engineer",
"salary": "$103,600",
"start_date": "2008/12/13",
"office": "Edinburgh",
"extn": "1667"
},
{
"id": "11",
"name": "Jena Gaines",
"position": "Office Manager",
"salary": "$90,560",
"start_date": "2008/12/19",
"office": "London",
"extn": "3814"
},
{
"id": "12",
"name": "Quinn Flynn",
"position": "Support Lead",
"salary": "$342,000",
"start_date": "2013/03/03",
"office": "Edinburgh",
"extn": "9497"
}
]
};
var previous = '';
$(document).ready(function() {
var table = $('#example').DataTable( {
data: dataSet.data,
"order": [[ 0, 'asc' ]],
columns: [
{ title: "Office", data: "office" },
{ title: "Name", data: "name" },
//{ title: "Office2", data: "office" },
{ title: "Position", data: "position" },
{ title: "Start date", data: "start_date" },
{ title: "Salary", data: "salary" }
],
"initComplete": function(settings, json) {
// in case the initial sort order leads to
// cells needing to be altered:
processColumnNodes( $('#example').DataTable() );
}
} );
table.on( 'draw', function () {
processColumnNodes( $('#example').DataTable() );
} );
function processColumnNodes(tbl) {
// see https://datatables.net/reference/type/selector-modifier
var selector_modifier = { order: 'current', page: 'current', search: 'applied' }
var previous = '';
var officeNodes = tbl.column(0, selector_modifier).nodes();
var officeData = tbl.column(0, selector_modifier).data();
for (var i = 0; i < officeData.length; i++) {
var current = officeData[i];
if (current === previous) {
officeNodes[i].textContent = '';
officeNodes[i].setAttribute("style", "border-top:none;");
} else {
officeNodes[i].textContent = current;
}
previous = current;
}
}
} );
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
<div style="margin: 20px;">
<table id="example" class="cell-border" style="width:100%">
</table>
</div>
When you run the above snippet you will see 2 out of the 4 rows for "Tokyo" at the end of page 1. You will see the 2 remaining ("orphaned") Tokyo rows at the top of page 2 - but you will also see the "Tokyo" label as well.
If your rowspan sizes are always exactly "2" then you can also set the values in the "page length" dropdown to only use even numbers:
"lengthMenu": [ 10, 20, 50, 100 ]
That way you will never have any "orphans" split across different pages.
这篇关于使用行跨度对数据表进行分页的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
