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
This discussion has been closed.
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