RowGroup collapse
RowGroup collapse
antoniocib
Posts: 277Questions: 62Answers: 1
Hi guys i just tried to add in my code the collapse for the row Group, but whatever i make never work..
Can you help me?
var collapsedGroups = {};
var table = $('#Buono').DataTable( {
paging: false,
ajax: {
url: 'php/table.Buono.php',
type: 'POST',
data: function (d) {
d.startDate = $('#startDate').val();
d.endDate = $('#endDate').val();
d.autista = $('#autista').val();
}
},
order:[10,8],
columns:[
{
"data": "buono.prov_mittente",
orderable:false,
searchable:false //3
},
{
"data": "buono.destinatario",
orderable:false,
searchable:false //4
},
{
"data": "buono.n_bancali",
orderable:false,
searchable:false //7
},
{
"data": "buono.n_bxd" //8
},
{
"data": "buono.data_bxd",
orderable:true
//9
},
{
"data": "buono.autista" //10
},
{
"data": "buono.prezzo",
orderable:false,
searchable:false,
visible:false //10
},
{
"data": "cond.zona",
orderable:false,
searchable:false
} //11
],
rowGroup: {
dataSrc: ['buono.autista', 'buono.n_bxd'],
startRender: function ( rows, group, level) {
var collapsed = !!collapsedGroups[group];
rows.nodes().each(function (r) {
r.style.display = collapsed ? 'none' : '';
});
var subLevelCount = '';
if ( level === 0 ) {
var subLevelCount =rows.data().pluck( 'buono' ).pluck( 'n_bxd').unique().count();
return group+' ('+subLevelCount+' Viaggi)';
} else {
return group +' ('+rows.count()+' Scarichi)';
}
},
endRender: function ( rows, group, level ) {
var stipendio_parziale = 500;
var subLevelCount = '';
if ( level === 0 ) {
var colore = 'verde';
return $('<tr/>')
.addClass(colore)
}
else {
var colore= 'giallo';
return $('<tr/>')
.addClass(colore)
}
},
},
} );
$('#dateSearch').on('click', function () {
table.ajax.reload();
});
editor.on( 'submitSuccess', function () {
table.ajax.reload();
} );
$('#Buono tbody').on('click', 'td.dtrg-group dtrg-start', function() {
var name = $(this).data('').pluck('buono').pluck('n_bxd');
collapsedGroups[name] = !collapsedGroups[name];
table.draw(false);
});
} );
}(jQuery));
This question has an accepted answers - jump to answer
Answers
Where did you get the code from? Collapsing groups isn't something that has built in support in RowGroup. Can you link to a running test case showing the issue so we can help to debug it please?
Allan
Idk how to do a test case but the code i find it: https://jsfiddle.net/lbriquet/k2zr5Lws/1/
Thanks for the link. The show / collapse appears to work just fine for me there.
Allan
@allan but why in my code doesnt work, i think the problem is there:
Honestly, I don't know because I can't see the broken case. The example you posted works okay. I would need to be able to see a broken case to have any chance of debugging it!
Allan
If you can update the test case to demonstrate the problem, please, we can debug it then,
Colin
@allan and @colin i can give you only this http://www.comidb.it/pos1/scrivania.php
Can u help me plssssssssssssss?
There isn't any code in that link to collapse/expand the groups! For us to progress this, as I said, "update the test case to demonstrate the problem, please, we can debug it then"
Colin
You have
$('#buono tbody').on('click', 'tr.group-start', function() {for your click event.tr.group-startis no longer used by RowGroup. Changetr.group-starttotr.dtrg-start.Kevin
@kthorngren anyway not works
It' would be worth looking at this example as it's doing exactly what you want - hopefully that'll get you going,
Colin
@colin work in this way, but i need that when i load the data the rows have to load in collapse
With this tweak, the rows are collapsed at the start: http://live.datatables.net/migixiqi/620/edit . That should give you a starting point to continue with the customisation,
Colin
Yes @colin but i try in another method:
Yes, it was only the class selector just as @kthorngren said! Thanks!
As the example,
- you just have to declare a variable (var mytable) to the Datatable instance
- Copy and paste the startRender within the rowGroup as it is
- Copy and paste the jquery onclick routine and change the table id in the selector
- ** Change the class just as as @kthorngren said
- and the last line should be with the variable of the datatable instance myTable.draw(false);
I would really like the RowGroup to work as Bootstrap accordion