File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
<link href="https://cdn.datatables.net/buttons/1.6.4/css/buttons.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/buttons/1.6.4/js/dataTables.buttons.js"></script>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
​
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">    
    <link href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    
    
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
<div class="row px-2 pt-4">
    <div class="col-md-12">
        <h3>Benutzer</h3>
        <table class="table table-bordered table-hover table-sm" id="userstable">
            <thead>
                <tr>
                    <th data-filter="false">ID</th>
                    <th data-filter="text">Username</th>
                    <th data-filter="select">role</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                  <td>1</td>
                  <td>Horst</td>
                  <td>admin</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Karl</td>
                  <td>admin</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Klaus</td>
                  <td>hiwi</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
    $(function() {
        var table = $('#userstable').DataTable( {
            dom:
                "<'row'"+
                    "<'col-md-2'l>"+
                    "<'text-center col-md-7'B>"+
                    "<'col-md-3 text-right'f>"+
                ">"+
                "<'row dt-table'"+
                    "<'col-md-12'tr>"+
                ">"+
                "<'row'"+
                    "<'col-md-5'i>"+
                    "<'col-md-7 text-right'p>"+
                ">",
            language: {
                url: "/js/datatables/german.json",
                decimal: ",",
                thousands: "."
            },
            buttons: [
                { 
                    extend: 'copy', 
                    text: 'Kopieren', 
                },
                { 
                    extend: 'excel', 
                    text: 'Excel', 
                },
                { 
                    extend: 'pdf', 
                    text: 'PDF', 
                },
                { 
                    extend: 'print', 
                    text: 'Drucken', 
                }
            ],
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "Alle"]],                
            colReorder: true,
            responsive: true,
            fixedHeader: true,
            order: [[ 0, "asc" ]],
            stateSave: true,
​
            initComplete: function (e, settings) {
                var columns = $('#userstable thead th[data-filter="select"]');
​
                this.api().columns(columns).every( function () {
                    var column = this;
                    var select = $('<select><option value="">- alle -</option></select>')
                        .appendTo( $('#userstable thead tr:eq(1) th[data-filter="select"]').empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );
                            
                            console.log(val)
    
                            column
                                .search( val ? val : '', true, false )
                                .draw();
                        } );
    
                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                } );
                
                var states = table.state.loaded();
​
                $('select', '#userstable thead tr:eq(1) th:eq(2)').val('test')
                
                var columns = $('#userstable thead th[data-filter="select"]');
                
                table.columns(columns).eq(0).each(function (colIdx) {
                    var colSearch = states.columns[colIdx].search;
 
                    if (colSearch.search) {
                        $('select', '#userstable thead tr:eq(1) th:eq('+colIdx+')').val(colSearch.search)
                    }else{
                        $('select', '#userstable thead tr:eq(1) th:eq('+colIdx+')').val('')
                    }
                });
                table.draw();
​
​
            }
        } )
        
        $('#userstable thead tr').clone(true).appendTo( '#userstable thead' );
        
        $('#userstable thead tr:eq(1) th[data-filter="text"]').each( function (i) {
            var title = $(this).text();
            $(this).html( '<input type="text" placeholder="'+title+' suchen" />' );
        })
    
        $('#userstable thead tr:eq(1) th[data-filter="false"]').html('')        
        
        $('#userstable thead tr:eq(1) th').each( function (i) {
            $( 'input', this ).on( 'keyup change', function () {
                if ( table.column(i).search() !== this.value ) {
                    table
                        .column(i)
                        .search( this.value )
                        .draw();
                }
            } );
        } );        
​
        var state = table.state.loaded();
        if (state) {
            var columns = $('#userstable thead th[data-filter="text"]');
            table.columns(columns).eq(0).each(function (colIdx) {
                var colSearch = state.columns[colIdx].search;
 
                if (colSearch.search) {
                    $('#userstable thead tr:eq(1) th:eq('+colIdx+') input').val(colSearch.search)
                }
            });
            table.draw();
        }
        
    } );
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers