DataTables

DataTables Examples

by AlexLvovsky

HTML

<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <table cellpadding="0" cellspacing="0" border="0" id="example">

  </table>
</div>

CSS

table {
      margin: 0 auto;
      //width: 100%;
      clear: both;
      border-collapse: collapse;
      table-layout: fixed; // ***********add this
      word-wrap: break-word; // ***********and this
    }
    
    .dataTables_scroll td,
    .dataTables_scroll th {
      font-size: 12px;
      padding: 0;
      border-bottom: none;
      cursor: default;
      //white-space: nowrap;
      //overflow: hidden;
      //text-overflow: ellipsis;
    }
    
    .dataTables_scrollHead {
      height: 34px;
    }
    
    .dataTables_scrollHead table {
      margin: 0 !important;
      background-color: transparent;
    }
    
    .dataTables_scrollHead table thead {
      height: 34px;
    }
    
    .dataTables_scrollHead table thead tr:hover {
      background-color: transparent;
    }
    
    .dataTables_scrollHead table thead tr:focus,
    .dataTables_scrollHead table thead th:focus {
      outline-color: transparent;
    }
    
    .dataTables_scrollHead table thead th {
      font-size: 12px;
      text-indent: 4px;
      font-weight: bolder;
      height: 34px;
      text-align: left;
      //line-height: 0px;
    }
    
    .dataTables_scrollHead table thead th .header-wrapper {
      width: initial;
      display: inline-block;
      text-indent: initial;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .dataTables_scrollHead table thead th .header-text {
      padding-right: 5px;
      display: inline-block;
      //white-space: nowrap;
      //overflow: hidden;
      //text-overflow: ellipsis;
    }
    
    .dataTables_scrollHead table thead th .header-title {
      //white-space: nowrap;
      //overflow: hidden;
      //text-overflow: ellipsis;
    }
    
    .dataTables_scrollHead table thead th .header-subtitle {
      height: 15px;
      color: #909090;
      margin-top: -4px;
      font-size: 11px;
      //white-space: nowrap;
      //overflow: hidden;
      //text-overflow: ellipsis;
    }
    
   ...

JavaScript

$(document).ready(function() {

  var myTable;

  myTable = $('#example').DataTable({
    autoWidth: false,
    destroy: true,
    //scrollY: "300px",
    scrollX: "100%",
    //select: {
    //  style: 'single'
    //},
    paging: false,
    filter: true,
    info: false,
    //"drawCallback": function(settings) {
    //  debugger;
    //  $(".dataTables_scrollHeadInner").css({
    //    "width": "100%"
    //  });
    //  $(".table ").css({
    //    "width": "100%"
    //  });
    //},
    headerCallback: function(thead, data, start, end, display) {
      var api = this.api();
      api.columns().iterator('column', function(settings, columnIndex) {
        var header = api.column(columnIndex).header();
        var filtersFound = header.getElementsByClassName("filterIcon").length !== 0;
        var prevWidth = header.offsetWidth;
        if (header.getElementsByClassName('header-wrapper').length === 0) {
          header.innerHTML = '';
          var subTitle = '';
          var subTitleEl = '';
          if (settings.aoColumns[columnIndex].subTitle) {
            subTitle = settings.aoColumns[columnIndex].subTitle;
          }
          subTitleEl = "<div class='header-subtitle'>" + subTitle + "</div>";

          header.insertAdjacentHTML('beforeend', "<div class='header-wrapper'>" +
            "<div class='header-text'>" +
            "<div class='header-title'>" + settings.aoColumns[columnIndex].title + "</div>" +
            subTitleEl +
            "</div>" +
            "</div>");

          header.insertAdjacentHTML('beforeend', "<div class='sort-icon'></div>");
          if (!filtersFound && settings.aoColumns[columnIndex].filterable) {
            if (!header.classList.contains('action-column')) {
              var filterIcon = '<span class="glyphicon glyphicon-filter filterIcon" data-filter="' + columnIndex + '" aria-hidden="true"></span>';
              header.insertAdjacentHTML('beforeend', filterIcon);
            }
          }

        }
     ...