这不是静态表,我们使用json数据渲染它。
在这里,我使用“aoColumns”动态渲染行
有没有办法使用 rowspan ,以便可以跨越单元格(1,2,David,Alex)。
数据表是否支持这种表格?
答案 0 :(得分:20)
Datatables不支持这种开箱即用的分组。 但是,在许多情况下,有一个插件可用。
它被称为RowsGroup,位于此处:Datatables Forums。还包括live example。
如果您将此示例中的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',
});
} );
以下是结果的屏幕截图:
答案 1 :(得分:1)
我尝试了RowsGroup plugin,但它只是通过劫持DataTables排序机制来实现这一点。如果您告诉它对给定列进行分组,它对您的作用基本上是对您无法关闭的列应用排序。因此,如果您想按其他列排序,则无法进行排序。这在我的申请中没有用。
相反,这里有一个工作小提琴,可以让你实现这个结果:
https://jsfiddle.net/bwDialogs/fscaos2n
基本思想是将所有多行数据展平为一行。第2行,第3行等内容将存储为第一行中隐藏的<script>
模板标记。
它的工作原理是使用DataTables&#39; drawCallback
函数在DataTables渲染DOM时操作DOM,而不必混淆DataTables,因为必须尝试解析rowspan
单元格内容。
由于这会在DataTables完成其魔法之后修改DOM,因此即使使用分页,搜索和排序,您的多行部分也会粘在一起。
干杯。
答案 2 :(得分:-1)
添加以下代码并根据您的要求进行修改
$(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);
}
}
}