jQuery DataTables: "Load more" button - Server-side processing

Example for article at https://www.gyrocode.com/articles/jquery-datatables-load-more-button/

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.15/datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-pageLoadMore/1.0.2/js/dataTables.pageLoadMore.min.js"></script>
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
                <th>Country</th>
                <th>Town</th>
                <th>School</th>
                 <th>Degree</th>

            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>UK</td>
                 <td>London</td>
                  <td>Lorem</td>
                   <td>Phd</td>

            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
                <td>UK</td>
                 <td>London</td>
                  <td>Lorem</td>
                   <td>Phd</td>

            </tr>
              <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
                <td>UK</td>
                 <td>London</td>
                  <td>Lorem</td>
                   <td>Phd</td>

            </tr>
           ...

CSS

.dataTable {
  display: block;
  width: 100%;
}
.dataTable thead {
  display: block;
  position: relative;
}
.dataTable thead tr {
  display: flex;
}
.dataTable thead th {
  flex-grow: 1;
  position: absolute;
  top: 100%;
  z-index: 9;
  width: 140px !important;
  left: 0;
  height: 80px;
  box-sizing: border-box;
  color: #fff;
  border: unset;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  background-color: #65696b;
}
.dataTable thead th:nth-child(2) {
  top: calc(100% + 80px * 1);
}
.dataTable thead th:nth-child(3) {
  top: calc(100% + 80px * 2);
}
.dataTable thead th:nth-child(4) {
  top: calc(100% + 80px * 3);
}
.dataTable thead th:nth-child(5) {
  top: calc(100% + 80px * 4);
}
.dataTable thead th:nth-child(6) {
  top: calc(100% + 80px * 5);
}
.dataTable thead th:nth-child(7) {
  top: calc(100% + 80px * 6);
}
.dataTable thead th:nth-child(8) {
  top: calc(100% + 80px * 7);
}
.dataTable thead th:nth-child(9) {
  top: calc(100% + 80px * 8);
}
.dataTable thead th:nth-child(10) {
  top: calc(100% + 80px * 9);
}
.dataTable thead th:nth-child(11) {
  top: calc(100% + 80px * 10);
}

.dataTable tbody {
  display: flex;
  width: 100%;
  overflow-x: scroll;
  padding-left: 140px;
  min-height: calc(80px * 10 + 18px);
}
.dataTable tbody tr {
  display: block;
  box-sizing: border-box;
}
.dataTable tbody td {
  display: block;
  height: 80px;
  width: 100px;
  position: relative;
  box-sizing: border-box;
}

.dataTable tbody td:not(:last-child)::before {
  border-bottom: 1px solid #f2e7e7f5;
}
.dataTable thead th:first{
  position:fixed
}
.dataTable tbody td:first{
  position:fixed
}

JavaScript

$('#example').DataTable();