DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
Examples
Manual
Reference
Extensions
Plug-ins
Blog
Forums
Discussions
Sign In
Support
FAQs
Download
Purchase
≡
Show site navigation
colspan or rowspan to tbody
colspan or rowspan to tbody
BFG86
Posts: 10
Questions: 0
Answers: 0
June 2013
edited June 2013
in
General
Hello everyone! =)
Please advise me how to apply colspan or rowspan for table cells(tbody>td)?
Thank you!
Replies
BFG86
Posts: 10
Questions: 0
Answers: 0
June 2013
Datatable init:
[code]
var tFlowRate = $("#tFlowRate").dataTable({
"bDeferRender": true,
"bPaginate": false,
"bFilter": false,
"bSort": false,
"bJQueryUI": true,
"bInfo": false,
"sScrollY": "700px",
"sScrollX": "102%",
"bScrollCollapse": true,
"sPaginationType": "full_numbers",
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [0] }
],
"fnRowCallback": function (nRow, aData, iDataIndex, oSettings) {
if ((aData[1].search('Сумма') != -1) || (aData[0].search('Сумма') != -1)) {
var zTree = $.fn.zTree.getZTreeObj("treetmpar"),
checkCount = zTree.getCheckedNodes(true).length;
$(nRow).children("td:eq(0)").html("");
$(nRow).children("td:eq(" + checkCount + ")").html(aData[1]);
}
},
"fnDrawCallback": function (oSettings) {
if (oSettings.aiDisplay.length == 0) {
return;
}
var nTrs = $('#tFlowRate tbody tr');
var iColspan = nTrs[0].getElementsByTagName('td').length;
var sLastGroup = "";
for (var i = 0, nTrsL = nTrs.length ; i < nTrsL; i++) {
var iDisplayIndex = oSettings._iDisplayStart + i;
var sGroup = oSettings.aoData[oSettings.aiDisplay[iDisplayIndex]]._aData[0];
if (sGroup != sLastGroup) {
var nGroup = document.createElement('tr');
var nCell = document.createElement('td');
nCell.colSpan = iColspan;
nCell.className = "group";
nCell.innerHTML = sGroup;
nGroup.appendChild(nCell);
nTrs[i].parentNode.insertBefore(nGroup, nTrs[i]);
sLastGroup = sGroup;
}
}
}
});
[/code]
I need to add $(nRow).children("td:eq(0)").attr("colspan", 15); to the "fnRowCallback", but the cells are shifted.
BFG86
Posts: 10
Questions: 0
Answers: 0
June 2013
Created a sample: http://live.datatables.net/iguyar/4/edit
BFG86
Posts: 10
Questions: 0
Answers: 0
July 2013
no ideas? =)
sutaria
Posts: 1
Questions: 0
Answers: 0
October 2013
@BFG86 - Did you figure this one out? I am having same issues
allan
Posts: 63,663
Questions: 1
Answers: 10,495
Site admin
October 2013
DataTables does not support colspan or rowspan in the tbody at this time. Sorry.
Allan
funny
Posts: 1
Questions: 0
Answers: 0
November 2013
@allan
when does DataTables support colspan or rowspan in the tbody ?
allan
Posts: 63,663
Questions: 1
Answers: 10,495
Site admin
November 2013
Not likely any time soon. If someone is willing to sponsor the work, please get in touch with me directly, but for the time being it isn't planning in the 1.x series at all.
Allan
This discussion has been closed.
Sign In
·
Register
Howdy, Stranger!
It looks like you're new here. If you want to get involved, click one of these buttons!
Sign In
Register
Quick Links
Categories
Recent Discussions
Unanswered
Categories
74.4K
All Categories
56
Priority support
24.1K
Free community support
1K
General
14
Announcements
2.5K
DataTables
83
DataTables 2
1.3K
DataTables 1.10
92
DataTables 1.9
35
DataTables 1.8
9
CloudTables
2.2K
Editor
2.8K
Extensions
20
AutoFill
310
Buttons
50
ColVis
30
DateTime
68
FixedColumns
50
FixedHeader
32
ColReorder
30
KeyTable
104
Responsive
23
RowReorder
42
Scroller
164
SearchBuilder
193
SearchPanes
107
Select
26
StateRestore
22
TableTools
220
Bug reports
67
Feature requests
100
Plug-ins
11
Blog
69
Web-site
Replies
[code]
var tFlowRate = $("#tFlowRate").dataTable({
"bDeferRender": true,
"bPaginate": false,
"bFilter": false,
"bSort": false,
"bJQueryUI": true,
"bInfo": false,
"sScrollY": "700px",
"sScrollX": "102%",
"bScrollCollapse": true,
"sPaginationType": "full_numbers",
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [0] }
],
"fnRowCallback": function (nRow, aData, iDataIndex, oSettings) {
if ((aData[1].search('Сумма') != -1) || (aData[0].search('Сумма') != -1)) {
var zTree = $.fn.zTree.getZTreeObj("treetmpar"),
checkCount = zTree.getCheckedNodes(true).length;
$(nRow).children("td:eq(0)").html("");
$(nRow).children("td:eq(" + checkCount + ")").html(aData[1]);
}
},
"fnDrawCallback": function (oSettings) {
if (oSettings.aiDisplay.length == 0) {
return;
}
var nTrs = $('#tFlowRate tbody tr');
var iColspan = nTrs[0].getElementsByTagName('td').length;
var sLastGroup = "";
for (var i = 0, nTrsL = nTrs.length ; i < nTrsL; i++) {
var iDisplayIndex = oSettings._iDisplayStart + i;
var sGroup = oSettings.aoData[oSettings.aiDisplay[iDisplayIndex]]._aData[0];
if (sGroup != sLastGroup) {
var nGroup = document.createElement('tr');
var nCell = document.createElement('td');
nCell.colSpan = iColspan;
nCell.className = "group";
nCell.innerHTML = sGroup;
nGroup.appendChild(nCell);
nTrs[i].parentNode.insertBefore(nGroup, nTrs[i]);
sLastGroup = sGroup;
}
}
}
});
[/code]
I need to add $(nRow).children("td:eq(0)").attr("colspan", 15); to the "fnRowCallback", but the cells are shifted.
Allan
when does DataTables support colspan or rowspan in the tbody ?
Allan