DataTable + ColVis + Bootstrap

by acjackson911

HTML

<script src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script src="http://datatables.net/release-datatables/extensions/ColVis/js/dataTables.colVis.js"></script>
<link rel="stylesheet" href="https://datatables.net/release-datatables/extensions/ColVis/css/dataTables.colVis.css">
<link rel="stylesheet" href="//cdn.datatables.net/plug-ins/f2c75b7247b/integration/bootstrap/3/dataTables.bootstrap.css">
<body><h1>Some Heading</h1>

<table class="table table-striped table-hover" id="mytable">
    <thead>
        <tr>
            <th id='info' scope="col" colspan='2' class='infoClass'>
                Info
            </th>
            <th id='dataGroup1' colspan='3' class='tableColGroup1'>
                DataGroup 1
            </th>
            <th id='dataGroup1' colspan='4' class='tableColGroup2'>
                DataGroup 2
            </th>
        </tr>
        <tr>
            <th headers='info' scope="col">
                Line #
            </th>
            <th headers='info' scope="col">
                EmpID
            </th>
            <th>
                SID
            </th>
            <th>
                First&#160;Name
            </th>
            <th>
                Last&#160;Name
            </th>
            <th>
                Type
            </th>
            <th>
                App ID
            </th>
            <th>
                Batch ID
            </th>
            <th>
                Correlation&#160;ID
            </th>
        </tr>
    </thead>
    <tbody> 
        <tr>
            <td class='line'>
                1
            </td>
            <td class='empid'>
                12
            </td>
            <td class='sid'>
                456
            </td>
            <td>
                Barney
            </td>
            <td>
                Gumble
            </td>
            <td>
                P Adj
            </td>
            <td>
                1
            </td>
           ...

CSS

tbody tr:nth-child(odd) {
    background-color:#eaf1dd;
}

.hidden {
    display: none;
}

.infoClass {
    background-color: #eaf1dd;
    text-align: center;
}



/* suchfeld */
div.dataTables_filter {
    margin-bottom: 0.5em;
    float: right;
    padding-left: 15px;
    padding-right: 15px;
}

JavaScript

$.extend( $.fn.dataTable.defaults, {
       'lengthMenu': [
            [10, 25, 50, -1],
            [10, 25, 50, 'All']
        ],
        // Default Wert für lengthMenu
        "iDisplayLength": 25,
      



        "columnDefs": [
            {className: 'text-right', targets: '_all'},
            {"type": 'my-html-num', "targets": '_all'},
           ],



} );







$('#mytable').DataTable( {
    //The dom parameter in DataTables is used to position the various controls that DataTables adds to the table (filtering, paging etc) in the DOM. This will directly effect the position of the elements in the display, when combined with your CSS. TableTools can be included by inserting the character 'T' into dom. This is all that is needed to initialise TableTools - everything is options and customisation.
     "dom": 'C<"clear">lfrtip',
     "tableTools": {
         "sSwfPath": "/swf/copy_csv_xls_pdf.swf"
     },
    // null für Defaultwert
    // die Anzaahl der Spalten muss GENAU stimmen, sonst passiert nix!
    "aoColumns" : [   
        null,   
        { sClass: "text-left" },
        null,
                        null,
                        null,
                        null,
                        null,
        null,
        null,
                  
                        
     ]              
    
});