JS Bin

 
<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <title>Directory</title>    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <link rel="stylesheet" href="libs/css/styles.css">
​
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css" crossorigin="anonymous">    <link href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css" rel="stylesheet">    <link href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css" rel="stylesheet">    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">  </head>  <body>​    <nav class="navbar fixed-top navbar-expand-mr navbar-light bg-light">      <span class="navbar-brand">DIRECTORY</span>      <ul class="navbar-nav ml-auto flex-row">        <li class="nav-item"><i class="far fa-building" id="getAllDepartments"></i></li>        <li class="nav-item"><i class="fas fa-search-location" id="getAllLocations"></i></li>        </ul>    </nav>​    <div class="container">      <div class="mx-auto bg-white rounded shadow" id="box">        <div class="table-responsive">          <table class="table table-fixed" id="mainTable" style="width:100%">            <thead class="thead-light">              <tr>                <th scope="col" id="firstNameCol">First Name</th>                <th scope="col" id="lastNameCol">Last Name</th>                <th scope="col" id="jobTitleCol">Job Title</th>                <th scope="col" id="emailCol">Email</th>                <th scope="col" id="departmentCol">Department</th>                <th scope="col" id="locationCol">Location</th>                <th scope="col" id="editEmployeeCol"></th>                <th scope="col" id="deleteEmployeeCol"></th>              </tr>            </thead>            <tbody id="mainData">            </tbody>          </table>        </div>      </div>    </div>​    <!--<script type="application/javascript" src="libs/js/jquery-2.2.3.min.js"></script>-->    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>    <script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>    <script src='https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js'></script>    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>    <script type="application/javascript" src="libs/js/script.js"></script>  </body></html>

 
nav {
    top: 0;}​.navbar-brand {    letter-spacing: 0.1em;    margin-left: 1em;    font-family: 'Roboto', sans-serif;}​.dt-button {    font-weight: bold;    color: #fff !important;    background-color: #198754 !important;    border-color: #fff !important;}​#getAllDepartments, #getAllLocations {    border: 1px solid #ced4da;    border-radius: 20%;    padding: 0.7em;    background-color: #fff;    margin-right: 1em;}​#mainTable {    font-family: 'Roboto', sans-serif;}​.container {    font-family: 'Roboto', sans-serif;    margin-top: 15vh;}​.table-responsive {    padding-left: 3%;    padding-right: 3%;    padding-top: 2%;    padding-bottom: 2%;    height: 78vh;}​@media only screen and (min-width: 768px) and (max-width: 991px) {    #jobTitleCol,    #departmentCol,    #locationCol,    #jobTitleData,    #departmentData,    #locationData {        display: none;    }​    #getAllDepartments, #getAllLocations {        padding: 0.8em;        margin-right: 0.8em;    }​    .navbar-brand {        margin-left: 0.8em;    }}​@media only screen and (max-width: 767px) {    #jobTitleCol,    #emailCol,    #departmentCol,    #locationCol,    #jobTitleData,    #emailData,    #departmentData,    #locationData {        display: none;    }        #getAllDepartments, #getAllLocations {        padding: 0.9em;        margin-right: 0.4em;    }​    .navbar-brand {        margin-left: 0.4em;    }}

 
var dataSet = [
    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ],    [ "Tiger", "Nixon", "System Architect", "test@test.com", "Marketing", "Edinburgh", "[icon]", "[icon]" ]];​function getAll() {                $scrollHeight = $('#mainTable').height() + $('.container').height() - $('#mainData').height()​                $('#mainTable').DataTable({                    data: dataSet,                    dom: 'Bflrtip',                    buttons: [{                        text: '+ Add',                        action: function (e, dt, node, config) {                            $('#addEmployeeModal').modal('show');​​                        }                    }],                    columnDefs: [{                        orderable: false,                        targets: [-1, -2]                    }],                    "scrollY": $scrollHeight,                    "paging": false,                    "info": false                });            };​$(document).ready(() => {    getAll();});

1 error 2 warnings

Line 105: Missing semicolon.

Line 126: Unnecessary semicolon.

Line 128: 'arrow function syntax (=>)' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).

Output Auto-run JS

300px

Shortcut	Action
ctrl + [num]	Toggle nth panel
Require alt key, leaving cmd+1, 2 etc for tab switching.
ctrl + 0	Close focused panel
ctrl + enter	Re-render output. If console visible: run JS in console
Ctrl + l	Clear the console
ctrl + /	Toggle comment on selected lines
ctrl + [	Indents selected lines
ctrl + ]	Unindents selected lines
tab	Code complete & Emmet expand
ctrl + s	Save & lock current Bin from further changes
ctrl + shift + s	Clone Bin
ctrl + y	Archive Bin
Complete list of JS Bin shortcuts

URL	Action
/	Show the full rendered output. This content will update in real time as it's updated from the /edit url.
/edit	Edit the current bin
/watch	Follow a Code Casting session
/embed	Create an embeddable version of the bin
/latest	Load the very latest bin (/latest goes in place of the revision)
/[username]/last	View the last edited bin for this user
/[username]/last/edit	Edit the last edited bin for this user
/[username]/last/watch	Follow the Code Casting session for the latest bin for this user
/quiet	Remove analytics and edit button from rendered output
.js	Load only the JavaScript for a bin
.css	Load only the CSS for a bin
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently.

Keyboard Shortcuts

JS Bin URLs