DataTable
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.colVis.min.js"></script>
<div class="table-responsive">
<table class="table table-responsive table-striped table-bordered dataTable dt-kunde">
<thead>
<tr>
<th>Name</th>
<th>Vorname</th>
<th>Firma</th>
<th>Wohnort</th>
<th>Geburtsdatum</th>
<th>Type</th>
<th>Optionen</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Name</td>
<td>Vorname</td>
<th>Firma</th>
<td>Wohnort</td>
<td>Geburtsdatum</td>
<td>Type</td>
<td>Optionen</td>
</tr>
</tfoot>
<tbody>
...JavaScript
table = $('table.dt-kunde').DataTable({
"order": [
[0, "asc"]
],
"aoColumnDefs": [
{
type: 'de_date',
targets: 4
},
{
"bSortable": false,
"aTargets": [6]
}
],
"language": {
"lengthMenu": "Zeige _MENU_",
"zeroRecords": "Es konnte kein Kunde gefunden werden.</a>",
"info": "Seite _PAGE_ von _PAGES_",
"infoEmpty": "Es konnte kein Kunde gefunden werden.",
"infoFiltered": "(bei _MAX_ angelegten Kunden)",
"search": " ",
"paginate": {
"first": "Erste",
"last": "Letzte",
"next": "Vor",
"previous": "Zurück"
},
},
dom: 'Bfrtip',
buttons: [
{
extend: 'colvisGroup',
text: 'Privat ',
show: [ 0, 1, 3, 4, 5, 6 ],
hide: [ 2 ],
action: function ( e, dt, node, config ) {
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
return data[5] == 'Privat'
}
)
table.draw();
$.fn.dataTable.ext.search.pop();
}
},
{
extend: 'colvisGroup',
text: 'Gewerbe ',
show: [ 0, 1, 2, 3, 5, 6 ],
hide: [ 4 ]
},
{
extend: 'colvisGroup',
text: 'Alle',
show: ':hidden'
}
]
});