File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!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://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>
CSSSaved
 
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;
}
JavaScriptSaved
 
function getAll() {
    $.ajax({
        url: "libs/php/getAll.php",
        type: 'GET',
        dataType: 'json',
        success: function (result) {
            console.log(result);
            if (result.status.name == "ok") {
                $.each(result.data, i => {
                    $('#mainData').append("<tr><td id='firstNameData'>" + result['data'][i]['firstName'] + "</td><td id='lastNameData'>" + result['data'][i]['lastName'] + "</td><td id='jobTitleData'>" + result['data'][i]['jobTitle'] + "</td><td id='emailData'><a href='mailto:" + result['data'][i]['email'] + "' style='text-decoration:none'>" + result['data'][i]['email'] + "</a></td><td id='departmentData'>" + result['data'][i]['department'] + "</td><td id='locationData'>" + result['data'][i]['location'] + "</td><td class='centered' id='editEmployeeData'><i class='fas fa-user-edit' id='editIcon' title='Edit' onClick=\"updateEmployee('" + result['data'][i]['firstName'] + "', '" + result['data'][i]['lastName'] + "', '" + result['data'][i]['jobTitle'] + "', '" + result['data'][i]['email'] + "', " + result['data'][i]['id'] + ")\"></i></td><td class='centered' id='deleteEmployeeData'><i class='fas fa-user-times' id='deleteIcon' title='Delete' onClick=\"deleteEmployeeModal('" + result['data'][i]['firstName'] + "', '" + result['data'][i]['lastName'] + "', " + result['data'][i]['id'] + ")\"></i></td></tr>");
                });
​
                $scrollHeight = $('#mainTable').height() + $('.container').height() - $('#mainData').height()
​
                $('#mainTable').DataTable({
                    dom: 'Bflrtip',
                    buttons: [{
                        text: '+ Add',
                        action: function (e, dt, node, config) {
                            $('#addEmployeeModal').modal('show');
​
                            $.ajax({
                                url: "libs/php/getAllDepartments.php",
                                type: 'GET',
                                dataType: 'json',
                                success: function (result) {
                                    if (result.status.name == "ok") {
                                        $.each(result.data, i => {
                                            $('#addEmployeeDepartment').append($("<option>", {
                                                text: result.data[i].name,
                                                value: result.data[i].id
                                            }));
                                        });
                                    };
                                },
                                error: function (jqXHR, textStatus, errorThrown) {
                                    console.log(errorThrown);
                                    console.log(textStatus);
                                    console.log(jqXHR);
                                }
                            });
                        }
                    }],
                    columnDefs: [{
                        orderable: false,
                        targets: [-1, -2]
                    }],
                    "scrollY": $scrollHeight,
                    "paging": false,
                    "info": false
                });
            };
        },
        error: function (jqXHR, textStatus, errorThrown) {
            console.log(errorThrown);
            console.log(textStatus);
            console.log(jqXHR);
        }
    });
};
​
$(document).ready(() => {
    getAll();
});
1 error 36 warnings
Line 9: 'arrow function syntax (=>)' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 10: ['data'] is better written in dot notation.
Line 10: ['firstName'] is better written in dot notation.
Line 10: ['data'] is better written in dot notation.
Line 10: ['lastName'] is better written in dot notation.
Line 10: ['data'] is better written in dot notation.
Line 10: ['jobTitle'] is better written in dot notation.
Line 10: ['data'] is better written in dot notation.
Line 10: ['email'] is better written in dot notation.
Line 10: ['data'] is better written in dot notation.
Line 10: ['email'] is better written in dot notation.
Line 10: ['data'] is better written in dot notation.
Line 10: ['department'] is better written in dot notation.
Line 10: ['data'] is better written in dot notation.
Line 10: ['location'] is better written in dot notation.
Line 10: ['data'] is better written in dot notation.
Line 10: ['firstName'] is better written in dot notation.
Line 10: ['data'] is better written in dot notation.
Line 10: ['lastName'] is better written in dot notation.
Line 10: ['data'] is better written in dot notation.
Line 10: ['jobTitle'] is better written in dot notation.
Line 10: ['data'] is better written in dot notation.
Line 10: ['email'] is better written in dot notation.
Line 10: ['data'] is better written in dot notation.
Line 10: ['id'] is better written in dot notation.
Line 10: ['data'] is better written in dot notation.
Line 10: ['firstName'] is better written in dot notation.
Line 10: ['data'] is better written in dot notation.
Line 10: ['lastName'] is better written in dot notation.
Line 10: ['data'] is better written in dot notation.
Line 10: ['id'] is better written in dot notation.
Line 13: Missing semicolon.
Line 28: 'arrow function syntax (=>)' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Line 34: Unnecessary semicolon.
Line 52: Unnecessary semicolon.
Line 60: Unnecessary semicolon.
Line 62: 'arrow function syntax (=>)' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers