Hi, I want to use row grouping dynamically on/off by switch a checkbox. With the same checkbox I set an filter. Here's my code:
var table_show_showing_page = $('#table_show_showing_page').DataTable( {
"lengthMenu": [ [15, 25, 50, -1], [15, 25, 50, "All"] ],
"ajax": {
"url": "ajax/table.show.showing.page.php",
},
"deferRender": true,
"order": [ [ 6, 'desc' ],[ 7, 'asc' ]],
"language": { "url": "js/german.js"},
"columns": [
{ "data": "ident", "orderable": false },
{ "data": "serial", "orderable": false, "visible": false, "searchable": false },
{ "data": "customer", "orderable": false },
{ "data": "project", "orderable": false },
{ "data": "cat", "orderable": false },
{ "data": "subcat", "orderable": false },
{ "data": "prio", "orderable": false, className: "prio_landing" },
{ "data": "date_start", "orderable": false},
{ "data": "date_end", "orderable": false, "visible": false},
{ "data": "duration", "orderable": false, "visible": false},
{ "data": "latest", "orderable": false, "visible": false},
],
"searchCols": [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
{ "search": "1" }
],
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;
api.column(0, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) {
$(rows).eq( i ).before(
'<tr class="group"><td colspan="5">'+group+'</td></tr>'
);
last = group;
}
} );
},
"initComplete": function() {
$( ".dataTables_filter" ).append( '<button class="btn btn-primary paddingLeft" type="button" data-toggle="collapse" data-target="#table-show-options" aria-expanded="false" aria-controls="table-show-options">Optionen</button>' );
this.api().columns().every( function () {
var column = this;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? val : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}
});
//******* Table filter
$('input[name="latest_on"]').on('switchChange.bootstrapSwitch', function(event, state) {
var value = (state ? '1' : '');
table_show_showing_page
.columns( 10 )
.search( value )
.draw();
});
Can anybody give me an example? Thank you!