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>
<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">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.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://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.3/jquery.dataTables.yadcf.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.1/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.1/js/buttons.colVis.min.js"></script>
<!DOCTYPE html>

<head>
  <meta charset=utf-8 />
  <title>DataTables - JS Bin</title>
</head>

<body>
  <table width="100%" id="dataset"></table>
</body>

JavaScript

$(function() {
  dtObj = $("#dataset").DataTable({
    "buttons": [{
      "columns": ":gt(1)",
      "extend": "colvis",
      "text": "Series"
    }],
    "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;"
    }, {
      "data": "_id",
      "title": "ID",
      "visible": false
    }, {
      "className": "text-right",
      "data": "Car",
      "title": "Car",
      "visible": false,
      "width": "6%"
    }, {
      "data": "Eyes",
      "title": "Eyes",
      "visible": false,
      "width": "6%"
    }, {
      "className": "text-right",
      "data": "Family",
      "title": "Family",
      "visible": false,
      "width": "6%"
    }, {
      "data": "Hand",
      "title": "Hand",
      "visible": true,
      "width": "6%"
    }, {
      "className": "text-right",
      "data": "HealthCare",
      "title": "HealthCare",
      "visible": false,
      "width": "6%"
    }, {
      "className": "text-right",
      "data": "Height",
      "title": "Height",
      "visible": true,
      "width": "6%"
    }, {
      "data": "Major",
      "title": "Major",
      "visible": true,
      "width": "6%"
    }, {
      "className": "text-right",
      "data": "Marriage",
      "title": "Marriage",
      "visible": false,
      "width": "6%"
    }, {
      "data": "Party",
      "title": "Party",
      "visible": false,
      "width": "6%"
    }, {
      "className": "text-right",
      "data": "Pot",
      "title": "Pot",
      "visible": false,
      "width": "6%"
    }, {
      "data": "Sex",
      "title": "Sex",
      "visible": false,
      "width": "6%"
   ...