File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
<meta name="description" content="Header Row columns don't line up when CSS * font-size and vertical scroll bars are used" />
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
​
    <link href="//datatables.net/download/build/nightly/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="//datatables.net/download/build/nightly/jquery.dataTables.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div id="table1" class="container" style="width:30em;">
      <table class="datatable display" id="id_hostCommunicationsTable"></table>
    </div>
  </body>
</html>
CSSSaved
 
* {
    font-size: 16px;
    }
​
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
#table1 div.dataTables_scrollHeadInner thead tr {
    height: 10em;
}
​
div.container {
  width:80%;
  margin: 0 auto;
}
  
.datatable {
    cellpadding: 0;
    cellspacing: 0;
}
​
.datatable th {
    font-size: 12px; 
}
​
.datatable td {
    font-size: 12px; 
}
​
.datatable th div.dataTables_sizing {
    font-size: 12px; 
}
​
.dataTables_length { 
    font-size: 12px; 
}
​
.dataTables_info {
    font-size: 12px; 
}
​
.dataTables_paginate {
    font-size: 12px; 
}
JavaScriptSaved
 
$(document).ready( function () {
 
      var data = {"data":{"commData":[{"hostIdx":1,"notifTotals":5024,"maxSeverity":5,"hostName":"Unmonitored Host","assetCrit":2,"alarmTotals":24,"threatScore":10},{"hostIdx":5,"notifTotals":113,"maxSeverity":4,"hostName":"Disc Host 10.0.1.221 C0EAE45C9A06","assetCrit":1,"alarmTotals":1,"threatScore":4},{"hostIdx":6,"notifTotals":22,"maxSeverity":4,"hostName":"Disc Host 10.0.1.38 3C4A92E13E28","assetCrit":4,"alarmTotals":1,"threatScore":16},{"hostIdx":8,"notifTotals":108,"maxSeverity":4,"hostName":"Disc Host 10.0.1.162 0025901D1664","assetCrit":1,"alarmTotals":1,"threatScore":4},{"hostIdx":10,"notifTotals":5727,"maxSeverity":4,"hostName":"Disc Host 10.0.1.67 9C8E992B4F4C","assetCrit":5,"alarmTotals":1,"threatScore":20},{"hostIdx":12,"notifTotals":18,"maxSeverity":2,"hostName":"Disc Host 10.0.1.24 0025901D1662","assetCrit":3,"alarmTotals":1,"threatScore":6},{"hostIdx":13,"notifTotals":119,"maxSeverity":4,"hostName":"Disc Host 10.0.1.126 9C8E991AD438","assetCrit":5,"alarmTotals":1,"threatScore":20},{"hostIdx":14,"notifTotals":21,"maxSeverity":3,"hostName":"Disc Host 10.0.1.151 441EA1478A7C","assetCrit":5,"alarmTotals":1,"threatScore":15},{"hostIdx":15,"notifTotals":178,"maxSeverity":2,"hostName":"Disc Host 10.0.1.146 68B599FB0C03","assetCrit":4,"alarmTotals":1,"threatScore":8},{"hostIdx":16,"notifTotals":309,"maxSeverity":2,"hostName":"Disc Host 10.0.1.33 B499BA014164","assetCrit":5,"alarmTotals":1,"threatScore":10},{"hostIdx":316,"notifTotals":2,"maxSeverity":0,"hostName":"Disc Host 172.16.45.161 C0EAE45C9A06","assetCrit":1,"alarmTotals":0,"threatScore":0},{"hostIdx":410,"notifTotals":4,"maxSeverity":3,"hostName":"Disc Host 10.0.1.143 002590A7A6CE","assetCrit":5,"alarmTotals":1,"threatScore":15},{"hostIdx":426,"notifTotals":11,"maxSeverity":4,"hostName":"Disc Host 10.0.1.223 C0EAE45C9A06","assetCrit":1,"alarmTotals":1,"threatScore":4}]}};
      
            $("#id_hostCommunicationsTable").dataTable( {
                "data": data.data.commData,
                "autoWidth": true,
                "scrollCollapse": true,
                "scrollY": "200px",
                "paginate": false,          
//              "paginate": true,           
                "searching": false,
//              "dom": "frtiS",
//              deferRender:    true,
                "order": [1, 'desc'], //Sort descending by Threat Score column
                "lengthMenu": [ 5, 10, 25, 50, 75, 100 ],
                "columnDefs": {
                    "contentPadding": "mmmm",
                    "targets": "_all"
                },
                "columns": [
                    {   
                        "width": "70%",
                        "title": "Host Name", //Row header text
                        "data": "hostName", //Column where the data comes from
                        "name": "hostName" //Way to refer to the column, instead of by number
                    },
                    {
                        "width": "10%",
                        "title": "Threat Score",
                        "data": "threatScore",
                        "name": "threatScore"
                    },
                    {
                        "width": "10%",
                        "title": "Alarm Totals",
                        "data": "alarmTotals",
                        "name": "alarmTotals"
                    },
                    {
                        "width": "10%",
                        "title": "Notification Totals",
                        "data": "notifTotals",
                        "name": "notifTotals"
                    }
                ], //End of 'columns' array
                "createdRow": function( row, data, dataIndex ) {
                    //Create id attribute, putting hostIdx in it
                    $(row).attr("id", "id_hostid__"+data.hostIdx);
                 }          
            }); //End of dataTable        
  
  
  
} );
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers