Bootstrap 4.1, Datatables 1.10.16

by Michael Baas

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.5/chosen.jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.3/jquery.dataTables.yadcf.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/colreorder/1.4.1/js/dataTables.colReorder.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" href="https://static.fontawesome.com/css/fontawesome-app.css">
<link rel="stylesheet" href="https://pro-staging.fontawesome.com/releases/v5.0.8/css/all.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.3/jquery.dataTables.yadcf.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.5/chosen.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.4.1/css/colReorder.bootstrap4.min.css">
<script...

CSS

table.dataTable > thead > tr th:nth-child( even ) {
	background-color: #F2F2F2;
	border: 1px solid #F2F2F2;
}
table.dataTable > tbody > tr td:nth-child( even ) {
	background-color: #F2F2F2;
	border: 1px solid #F2F2F2;
}
.c2em {width: 2em !important;}

JavaScript

$(function() {
  dtObj = $("#dataset").DataTable({
    "buttons": [{
      "columns": ":gt(1)",
      "extend": "colvis",
      "text": "Series"
    }],

    "dom": "Bfrtip",
    "lengthMenu": [[10, 25, 50, -1],
      ["10 rows", "25 rows", "50 rows", "Show all"]
    ],
    "columns": [{
      "data": "_include",
      "render": function(data, type, row, meta) {
        var res = '';
        if (row._include) {
          res = '<span onclick="toggleRecord(' + row._id + ')"><i class="fal fa-eye"></i></span>';
        } else {
          res = '<span onclick="toggleRecord(' + row._id + ')"><i class="fal fa-eye-slash"></i></span>';
        }
        return res;
      },
      "title": "Include",
      "visible": true,
      "width": "2em;",
      "class": "c2em"
    }, {
      "data": "_id",
      "title": "ID",
      "visible": false
    }, {
      "className": "text-right",
      "data": "Car",
      "title": "Car",
      "visible": false,
      "width": "100px"
    }, {
      "data": "Eyes",
      "title": "Eyes",
      "visible": false,
      "width": "100px"
    }, {
      "className": "text-right",
      "data": "Family",
      "title": "Family",
      "visible": false,
      "width": "100px"
    }, {
      "data": "Hand",
      "title": "Hand",
      "visible": true,
      "width": "100px"
    }, {
      "className": "text-right",
      "data": "HealthCare",
      "title": "HealthCare",
      "visible": false,
      "width": "100px"
    }, {
      "className": "text-right",
      "data": "Height",
      "title": "Height",
      "visible": true,
      "width": "100px"
    }, {
      "data": "Major",
      "title": "Major",
      "visible": true,
      "width": "100px"
    }, {
      "className": "text-right",
      "data": "Marriage",
      "title": "Marriage",
      "visible": false,
      "width": "100px"
    }, {
      "data": "Party",
      "title": "Party",
      "visible": false,
      "width": "100px"
    }, {
      "className": "text-right",
     ...