Javascript 如何在JQuery数据表中添加行跨度

我正在使用Jquery datatables构建一个表。
我的要求如下

这不是一个静态表，我们使用json数据呈现它
现在，我使用“aoColumns”动态呈现行。
是否有任何方法可以使用行span，以便对单元格（1,2，David，Alex）进行跨距测量。

---

datatables支持这种类型的表吗？

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

它被称为RowsGroup，位于以下位置：。还包括一份报告

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

以下是结果的屏幕截图：

---

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

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

$（窗口）.on（“加载”，函数（）{
MakeRows（）；
addRowspan（）；
$（“.paginate_按钮”）。在（“单击”，函数（）上）{
MakeRows（）；
addRowspan（）；
});
});
函数MakeRows（）{
var tmp_tbl=$（“#仪表盘详细信息”）；
var_l=tmp_tbl.find（“tr”）；
var(td=“”、_t_td=“”、old_txt=“”、_t_txt=“”；_tr_count=1；_tr_countadd=1；
对于（i=0；i<\u l.length；i++）{
_t_td=tmp_tbl.find（“tr”）.eq（i）.find（“td”）.eq（0）.find（“span”）；
_t_txt=$（t_td）.text（）；
_t\u txt=\u t\u txt.replace（/\/，“”）；\u t\u txt=\u t\u txt.replace（/\/，“”）；
如果（\t\u txt.length>0）{
如果（\u t\u txt！=旧的\u txt）{
if（$（_l）.eq（i）.hasClass（_t_txt）==false）{
_tr_count=1；tr_countadd=1；
$（_-l）.eq（i）.addClass（“+_-t\u-txt+”）.addClass（_-t\u-txt+“+i”）；
}
old_txt=_t_txt；
}否则{
_tr_计数=_tr_计数+1；
如果（_tr_countadd==1）{
$（_-l）.eq（i）.addClass（“+_-t\u-txt+”）.addClass（_-t\u-txt+“+i”）
.addClass（“hiddenClass”）.addClass（“maintr”）.attr（“trcount”），_tr_count）.attr（“addedtrcount”，“maintr”）；
_tr_countadd=_tr_countadd+1；
}否则{
$（_-l）.eq（i）.addClass（“+_-t\u-txt+”）.addClass（_-t\u-txt+“+i”）
.addClass（“hiddenClass”）.attr（“trcount”、\u tr\u count）
}
}
}
_t_td=“”；
}
}
函数addRowspan（）{
var t_txt=“”；
var_alltrmain=$（“.maintr”）；
var_h_td=[“0”、“10”、“11”、“12”、“13”]；
对于（i=0；i我尝试了，但它只是通过劫持DataTables排序机制实现了这一点。如果你让它对给定列进行分组，它为你做的基本上是对该列应用排序，你不能关闭。因此，如果你想按另一列排序，你不能。这在我的应用程序中不起作用

取而代之的是，这里有一个可以让你实现这个结果的食谱：


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

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

因为这会在DataTables完成它的神奇功能后修改DOM，所以即使分页、搜索和排序，您的多行部分也会粘在一起

干杯。
它不支持表体中的rowspan。您至少可以（1）解释代码的工作原理和方式，并（2）重构代码以使其可读。要“修改”并不容易代码是这样的。修改？你在开玩笑吗？我只看到一个随机文本，有时看起来像代码：SIt看起来像JavaScript有一个strokeI使用过它。行span

可以工作，但分页会中断。你知道如何解决这个问题吗？是的，分页在我的情况下也不起作用。每当我点击第二页时，它都没有任何作用这是我所需要的，因为我的一个专栏需要分组，但每一行都有相同的“html”内容，不能使用行组扩展，或者我不能使用它哈哈：（无论如何，谢谢！很棒的东西。还没有找到比这个更好的答案。谢谢！