DataTables
DataTables Examples
HTML
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.1.2/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.1.2/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/select/1.1.2/css/select.dataTables.min.css">
<script src="https://cdn.datatables.net/select/1.1.2/js/dataTables.select.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/responsive/2.0.2/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/responsive/2.0.2/css/responsive.dataTables.min.css">
<script src="http://kingkode.com/datatables.editor.lite/js/altEditor/dataTables.altEditor.free.js"></script>
<div class="container">
<table class="table table-bordered" id="passed">
<thead>
<tr>
<th>Имя</th>
<th>Месяц</th>
<th>Дата сдачи отчета</th>
</tr>
</thead>
<tbody>
<tr>
<td>Киселёва Мальвина</td>
<td>Июль, 2019 </td>
<td>22.12.2019</td>
</tr>
<tr>
<td>Ёжикова Ирина</td>
<td>Сентябрь, 2019 </td>
<td>21.12.2019</td>
</tr>
<tr>
<td>Бутко Кристина</td>
<td>Декабрь, 2019 </td>
<td>29.12.2019</td>
</tr>
<tr>
<td>Миркина Валентина</td>
<td>Декабрь, 2019 </td>
<td>21.12.2019</td>
</tr>
</tbody>
</table>
</div>
JavaScript
$(document).ready(function() {
var table = $('#passed').DataTable({
"order": [[ 0, "asc" ]],
} );
});