Javascript 如何在 JQuery 数据表中添加 Rowspan
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32088676/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add Rowspan in JQuery datatables
提问by Shree
Im using Jquery datatables to construct a table.
My requirement is like below
我使用 Jquery 数据表来构造一个表。
我的要求如下
This is not a static table, and we are rendering it using json data.
Here I'm, rendering the rows dynamically using "aoColumns".
Is there any way to use rowspanso that the cells (1,2,David,Alex) can be spanned.
Does datatables support this kind of table ?
这不是静态表，我们使用 json 数据呈现它。
我在这里，使用“aoColumns”动态呈现行。
有什么方法可以使用rowspan来跨越单元格 (1,2,David,Alex)。
数据表支持这种表吗？
回答by DKSan
Datatables does not support this kind of grouping out of the box. But, as in many cases, there is a plugin available.
数据表不支持这种开箱即用的分组。但是，在许多情况下，有一个可用的插件。
It is called RowsGroup and is located here: Datatables Forums. A live exampleis also included.
它称为 RowsGroup，位于此处：Datatables 论坛。还包括一个活生生的例子。
If you change the JS part in this example to the below you will have your desired output presented to you in the output window.
如果您将本示例中的 JS 部分更改为以下内容，您将在输出窗口中看到您想要的输出。
$(document).ready( function () {
var data = [
['1', 'David', 'Maths', '80'],
['1', 'David', 'Physics', '90'],
['1', 'David', 'Computers', '70'],
['2', 'Alex', 'Maths', '80'],
['2', 'Alex', 'Physics', '70'],
['2', 'Alex', 'Computers', '90'],
];
var table = $('#example').DataTable({
columns: [
{
name: 'first',
title: 'ID',
},
{
name: 'second',
title: 'Name',
},
{
title: 'Subject',
},
{
title: 'Marks',
},
],
data: data,
rowsGroup: [
'first:name',
'second:name'
],
pageLength: '20',
});
} );
Here is a screenshot of the result:
这是结果的屏幕截图：
回答by BrentW
I tried the RowsGroup plugin, but it achieves this just by hiHymaning the DataTables sort mechanism. If you tell it to group a given column, what it does for you is basically to apply a sort to that column that you can't turn off. So, if you want to sort by another column, you can't. That didn't work in my application.
我尝试了RowsGroup 插件，但它只是通过劫持 DataTables 排序机制来实现的。如果您告诉它对给定的列进行分组，那么它对您所做的基本上就是对您无法关闭的该列应用排序。所以，如果你想按另一列排序，你不能。这在我的应用程序中不起作用。
Instead, here's a working fiddle for a recipe that allows you to achieve this result:
相反，这是一个可以让您实现此结果的配方的工作小提琴：
https://jsfiddle.net/bwDialogs/fscaos2n
https://jsfiddle.net/bwDialogs/fscaos2n
The basic idea is to flatten all of your multi-row data into a single row. Content in your 2nd, 3rd, etc. rows are stored as a hidden <script>template tag within your first row.
基本思想是将所有多行数据展平为一行。第 2、3 等行中的内容存储为<script>第一行中的隐藏模板标签。
It works by using DataTables' drawCallbackfunction to manipulate the DOM once DataTables has rendered it, without confusing DataTables by having to try parsing rowspancell content.
它的工作原理是使用 DataTables 的drawCallback函数在 DataTables 呈现后操作 DOM，而不必尝试解析rowspan单元格内容而混淆 DataTables 。
Since this modifies the DOM after DataTables has done its magic, your multi-row sections will stick together even with pagination, searching, and sorting.
由于这会在 DataTables 发挥其魔力后修改 DOM，因此即使进行分页、搜索和排序，您的多行部分也会粘在一起。
Cheers.
干杯。
回答by shobha mishra
add a below code and modify according to your requirement
添加以下代码并根据您的要求进行修改
$(window).on("load",function() {
MakeRows();
addRowspan();
$(".paginate_button").on("click", function() {
MakeRows();
addRowspan();
});
});
function MakeRows() {
var tmp_tbl = $("#dashboardDetails");
var _l = tmp_tbl.find("tr");
var _td = "",_t_td = "", old_txt = "",_t_txt = ""; _tr_count = 1;_tr_countadd = 1;
for(i = 0;i< _l.length; i ++) {
_t_td = tmp_tbl.find("tr").eq(i).find("td").eq(0).find("span");
_t_txt = $(_t_td).text();
_t_txt = _t_txt.replace(/\//,"_");_t_txt = _t_txt.replace(/\//,"_");
if (_t_txt.length > 0) {
if(_t_txt != old_txt) {
if($(_l).eq(i).hasClass(_t_txt) == false) {
_tr_count = 1;_tr_countadd = 1;
$(_l).eq(i).addClass("" + _t_txt + "").addClass(_t_txt + "_" + i);
}
old_txt = _t_txt;
} else {
_tr_count = _tr_count + 1;
if (_tr_countadd == 1) {
$(_l).eq(i).addClass("" + _t_txt + "").addClass(_t_txt + "_" + i)
.addClass("hiddenClass").addClass("maintr").attr("trcount", _tr_count).attr("addedtrcount", "maintr");
_tr_countadd = _tr_countadd + 1;
} else {
$(_l).eq(i).addClass("" + _t_txt + "").addClass(_t_txt + "_" + i)
.addClass("hiddenClass").attr("trcount", _tr_count)
}
}
}
_t_td = "";
}
}
function addRowspan() {
var t_txt = "";
var _alltrmain = $(".maintr");
var _h_td = ["0","10","11","12","13"];
for (i = 0; i <= _alltrmain.length; i ++) {
for (j = 0; j <= _h_td.length; j ++) {
t_txt = $(_alltrmain).eq(i).attr("trcount");
$(_alltrmain).eq(i).prev().find("td").eq(_h_td[j]).attr("rowspan", t_txt);
}
}
}
