如何在JQuery数据表中添加Rowspan

我使用Jquery数据表来构造一个表。
我的要求如下

这不是静态表，我们使用json数据渲染它。
在这里，我使用“aoColumns”动态渲染行。
有没有办法使用rowspan，以便可以跨越单元格（1,2，David，Alex）。
数据表是否支持这种表？

Answer 1

Datatables不支持开箱即用的这种分组。 但是，在许多情况下，有一个插件可用。

它被称为RowsGroup，位于： Datatables论坛 。 还包括一个实例 。

如果您将此示例中的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', }); } ); 

以下是结果的屏幕截图：

Answer 2

我尝试了RowsGroup插件 ，但它只是通过劫持DataTables排序机制来实现这一点。 如果您告诉它对给定列进行分组，它对您的作用基本上是对您无法关闭的列应用排序。 因此，如果您想按其他列排序，则不能。 这在我的申请中没有用。

相反，这里有一个工作小提琴，可以让你实现这个结果：

https://jsfiddle.net/bwDialogs/fscaos2n

基本思想是将所有多行数据展平为一行。 第2行，第3行等中的内容将作为隐藏的模板标记存储在第一行中。

它的工作原理是使用DataTables的drawCallback函数在DataTables呈现它时操作DOM，而不必因为尝试解析rowspan单元格内容而混淆DataTables。

由于这在DataTables完成其魔法之后修改了DOM，因此即使使用分页，搜索和排序，您的多行部分也会粘在一起。

干杯。

Answer 3

添加以下代码并根据您的要求进行修改

 $(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); } } }