Link to test case: https://live.datatables.net/xoqasoga/16/edit
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Hi,
I Have 3 problems/questions on a DT 2.0 with rowgroup (responsive and other extensions)
1) Problem width OrderFixed
I've created a test case with (almost) real data, but the output doesn't work and I don't find the reason why.
So I've put screenshot to try to explain.
At least, you can see the JS content here :
https://live.datatables.net/xoqasoga/16/edit
If I add a fixed order on the column Date with orderFixed: [2, 'desc'].
This is how the table look like :
- the fixed order is good
- a triangle is showing at the top of the column 0 (it doesn't happen with an order « not fixed » order: [2, 'desc'])
- sorting the other columns doesn't work anymore (it doesn't happen with an order « not fixed » order: [2, 'desc'])
This is part of the DT code :
orderFixed: [2, 'desc'], // tri fixe pour la rupture (dateDebut)
responsive: {
details: {
type: 'column',
target: 'tr',
renderer: function (api, rowIdx, columns) {
var data = $.map(columns, function (col, i) {
return col.hidden
? '<p class="has-text-grey px-2 py-2"><span class="has-text-weight-semibold smallcaps">'+ col.title + ' : </span>' + col.data + '</p>'
: '';
}).join('');
return data ;
}
}
},
rowGroup: {
dataSrc: 'dateDebut.annee', // groupe pour rupture
startClassName: 'rupture has-text-' + interfaceBB,
endClassName: 'soustotal has-text-' + interfaceBB,
startRender: function ( rows, group ) {
return 'IMMOBILISATIONS ' + group + '<span class="is-pulled-right">('+rows.count()+')</span>';
},
endRender: function (rows, group) {
// sous-totaux par groupe
var subtotalAchat =
rows
.data()
.pluck('Montant1')
.reduce(function (a, b) {
return a + b * 1;
}, 0) ;
var subtotalCession =
rows
.data()
.pluck('Montant2')
.reduce(function (a, b) {
return a + b * 1;
}, 0) ;
subtotalAchat = DataTable.render.number(' ', ',', 2, null, '').display(subtotalAchat);
subtotalCession = DataTable.render.number(' ', ',', 2, null, '').display(subtotalCession);
return $('<tr/>')
.append('<td colspan="10" class="has-text-right has-text-weight-semibold">TOTAL ' + group + ' (' + rows.count() + ')</td>')
.append('<td class="has-text-right has-text-weight-semibold">' + subtotalAchat + '</td>')
.append('<td></td>')
.append('<td class="has-text-right has-text-weight-semibold">' + subtotalCession + '</td>')
.append('<td></td>');
}
}
2) Rowgroup & Responsive : How counting the <td> ?
In the same DT, with RowGroup I'm adding subtotals for each group, and a global total as you can see on the capture below.
But the DT is responsive and I don't know how I could count the visible <td> to add the good value in the colspan in the subtotal in the endRenderof rowgroup.
I don't have the problem with the footerCallbackfor the global total because the JS code is different.
Here, the subtotals have the right value in colspan because all columns are visible :
Here, the window is smaller, some columns on the right are hidden and the subtotals <tr> doesn't look good (because of my code !) To be perfect, I should change the colspan and also hide the same columns) :
3) FixedHeader, alignement problems
As you can see on the last 2 screenshots, the title columns in the fixed header doesn't have the same width of the content <td>.
I thought this problem was solved in DT 2.0.
Maybe, I should change something in my JS or HTML code ?
Thank you for your patience reading this long message (full of typos) and your help
