Javascript 使用行跨度对数据表进行分页

我在使用行跨度对数据表进行分页时遇到了一些问题。我的问题是，当指示“

pageLength

”属性时，它会考虑所有TR。例如，如果我有这样的东西，我需要使用

“pageLength”：3

--------------------------------------------
                     |
tr with rowspan = 2  | tr inside #1
                     |----------------------
                     |
                     | tr inside #2
--------------------------------------------

---

我这里的问题是，由于这个原因，当沿着表的不同页面分页时，可能会发生一些tr最终成为“孤立”的情况。例如，如果页面以tr#1结尾，tr#2可能会在下一页显示为“单独”（没有行跨度为2的tr）。有没有什么方法可以只考虑那些“父”行，即具有rowspan的行，对这些表进行分页？

我不知道有什么方法可以完全满足您的要求。话虽如此，我在下面提供一些注释，以防它们是可接受的替代方案

---

您可以创建一个伪

行span

效果，无论您在哪个页面上，该效果都会在第一列中显示相关值：

但是，即使这样，您仍然可以在一页的底部看到跨距中的一些行，在下一页的顶部看到跨距中的其余行。我看不出有什么办法可以解决这个问题（除了本答案末尾提到的一种可能的情况）

作为替代方案，您可能需要研究扩展。但是，同样不能保证整个组始终只出现在一个页面上

---

如果您对“伪行跨度”感兴趣，下面是一个示例。它通过操纵每个页面上的DOM节点来工作，这样就不会显示第一列中的重复值（并且单元格的

边框顶部

行被删除）

DataTable中的数据本身没有改变，因此如果搜索“Edinburgh”，仍然可以找到所有3条记录

var数据集={
“数据”：[
{
“id”：“1”，
“名字”：“老虎尼克松”，
“职位”：“系统架构师”，
“工资”：“$320800”，
“开始日期”：“2011/04/25”，
“办公室”：“爱丁堡”，
“extn”：“5421”
},
{
“id”：“2”，
“姓名”：“Garrett Winters”，
“职位”：“会计”，
“工资”：“$170750”，
“开始日期”：“2011/07/25”，
“办公室”：“东京”，
“extn”：“8422”
},
{
“id”：“3”，
“姓名”：“阿什顿·考克斯”，
“职位”：“初级技术作者”，
“工资”：“$86000”，
“开始日期”：“2009/01/12”，
“办公室”：“东京”，
“extn”：“1562”
},
{
“id”：“4”，
“姓名”：“塞德里克·凯利”，
“职位”：“高级Javascript开发人员”，
“工资”：“$433060”，
“开始日期”：“2012/03/29”，
“办公室”：“纽约”，
“extn”：“6224”
},
{
“id”：“5”，
“名称”：“爱里佐藤”，
“职位”：“会计”，
“工资”：“$162700”，
“开始日期”：“2008/11/28”，
“办公室”：“东京”，
“extn”：“5407”
},
{
“id”：“6”，
“姓名”：“Brielle Williamson”，
“职位”：“集成专家”，
“工资”：“$372000”，
“开始日期”：“2012/12/02”，
“办公室”：“纽约”，
“extn”：“4804”
},
{
“id”：“7”，
“姓名”：“Herrod Chandler”，
“职位”：“销售助理”，
“工资”：“$137500”，
“开始日期”：“2012/08/06”，
“办公室”：“旧金山”，
“extn”：“9608”
},
{
“id”：“8”，
“姓名”：“Rhona Davidson”，
“职位”：“集成专家”，
“工资”：“$327900”，
“开始日期”：“2010/10/14”，
“办公室”：“东京”，
“extn”：“6200”
},
{
“id”：“9”，
“姓名”：“科琳·赫斯特”，
“职位”：“Javascript开发人员”，
“工资”：“205500美元”，
“开始日期”：“2009/09/15”，
“办公室”：“旧金山”，
“extn”：“2360”
},
{
“id”：“10”，
“姓名”：“索尼娅·弗罗斯特”，
“职位”：“软件工程师”，
“工资”：“$103600”，
“开始日期”：“2008/12/13”，
“办公室”：“爱丁堡”，
“extn”：“1667”
},
{
“id”：“11”，
“姓名”：“Jena Gaines”，
“职位”：“办公室经理”，
“工资”：“$90560”，
“开始日期”：“2008/12/19”，
“办公室”：“伦敦”，
“extn”：“3814”
},
{
“id”：“12”，
“姓名”：“Quinn Flynn”，
“职位”：“支持领导”，
“工资”：“$342000”，
“开始日期”：“2013/03/03”，
“办公室”：“爱丁堡”，
“extn”：“9497”
}
]
};
var先前=“”；
$（文档）.ready（函数（）{
变量表=$（“#示例”）。数据表（{
数据：dataSet.data，
“订单”：[[0，'asc']]，
栏目：[
{标题：“办公室”，数据：“办公室”}，
{标题：“名称”，数据：“名称”}，
//{标题：“办公室2”，数据：“办公室”}，
{标题：“位置”，数据：“位置”}，
{标题：“开始日期”，数据：“开始日期”}，
{标题：“薪金”，数据：“薪金”}
],
“initComplete”：函数（设置，json）{
//如果初始排序顺序导致
//需要改变的细胞：
processColumnNodes（$（'#示例'）.DataTable（）；
}
} ); 
表.关于（'draw'，函数（）{
processColumnNodes（$（'#示例'）.DataTable（）；
} );
函数processColumnNodes（tbl）{
//看https://datatables.net/reference/type/selector-modifier
变量选择器_修饰符={顺序：“当前”，页面：“当前”，搜索：“应用”}
var先前=“”；
var officeNodes=tbl.column（0，选择器\修饰符）.nodes（）；
var officeData=tbl.column（0，选择器\修饰符）.data（）；
对于（var i=0；i

我不知道您的代码是什么样子。也许你可以创建一个小提琴或类似的，并分享链接。我有一些css风格的问题，但经过一些修改后，你的代码工作得很好。谢谢！：）