У меня есть страница с начальной загрузкой 3, таблицами данных, скроллером и шрифтом. Я использую серверную и вертикальную прокрутку (скроллер), без нумерации страниц.
Я хочу, чтобы при загрузке страницы, скроллер был на дне (последняя страница пагинации).
Теперь я вижу вертикальную линии на теле после загрузки. И, прокрутите до последней страницы, остановитесь посередине.
Хотелось бы загрузить последнюю страницу вместо прокрутки.
Полная демонстрация со всем моим кодом:
Полная демонстрационная страница
код html:
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/scroller/2.0.1/css/scroller.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.16/jquery.mask.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/scroller/2.0.1/js/dataTables.scroller.min.js"></script>
<style>
body {
margin: 0px;
padding: 0px;
background-color: #f1f1f1;
}
.box {
width: 1200px;
padding: 20px;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
min-height: 790px;
margin-bottom: 30px;
}
.container-fluid {
width: 1200px;
}
.navbar-right .dropdown-menu {
left: 0px;
}
hr {
margin-top: 30px;
margin-bottom: 30px;
border: 0px;
border-top: 1px solid #ccc;
}
.col-form-label {
text-align: right;
height: 34px;
padding: 6px 0px;
}
label.col-4 {
text-align: right;
padding-right: 0px;
}
.form-group {
margin-bottom: 5px;
}
.textc {
text-align: center;
}
hr {
margin-top: 0px;
margin-bottom: 10px;
border-top: 1px solid #EEE;
}
table {
table-layout: fixed;
font-size: 95%;
}
th,
td {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.alert {
margin-bottom: 0px;
}
/* DataTable Information & Search Box Div position */
.DataTableInfo,
.DataTableFilter {
display: inline-block;
}
.DataTableFilter {
float: right;
}
.modal-customer {
width: 1200px;
margin: 30px auto;
}
fa {
vertical-align: middle;
}
.first-row {
margin-top: 15px;
}
.first-row h3 {
margin-bottom: 30px;
margin-top: 0px;
display: inline-block;
}
.container {
width: 1200px;
}
.table>tbody>tr>td {
vertical-align: middle;
}
/* set table column to vertical middle */
</style>
</head>
<body>
<div class="container">
<table id="ExpensesTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>#</th>
<th>#</th>
<th>#</th>
<th>#</th>
<th>#</th>
<th>#</th>
<th>#</th>
<th>#</th>
<th>#</th>
<th>#</th>
<th>#</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
Код js:
$(document).ready(function(){
if ( $.fn.DataTable.isDataTable('#ExpensesTable') ) {
$('#ExpensesTable').DataTable().destroy();
}
$('#ExpensesTable').DataTable( {
dom : '<"DataTableInfo"i><"DataTableFilter"f>rt',
ajax: 'http://dnses.net/project88751/api/expenses.php?action=getExpenses',
processing: true,
serverSide: true,
scrollY: 520,
scroller: {
loadingIndicator: true
},
ordering: false,
oLanguage: {
"sSearch": "<strong>Search Expenses:</strong>" //search
},
initComplete: function(settings, json) {
$('.dataTables_scrollBody').css({ 'overflow' : 'hidden', 'overflow-y' : 'auto' });
var api = new $.fn.dataTable.Api( settings );
json.recordsFiltered = json.recordsFiltered - 1;
api.scroller.toPosition( json.recordsFiltered );
},
columnDefs: [
{ width: "2.5%", targets: 0 },
{ width: "7.2%", targets: 0 },
{ width: "8.4%", targets: 1 },
{ width: "4.9%", targets: 2 },
{ width: "13.5%", targets: 3 },
{ width: "4.9%", targets: 4 },
{ width: "4.9%", targets: 5 },
{ width: "7.2%", targets: 6 },
{ width: "4.9%", targets: 7 },
{ width: "12.5%", targets: 8 },
{ width: "9.3%", targets: 9 },
{ className: "text-right", "targets": [ 3,5] },
{ className: "text-center", "targets": [ 0, 6, 7,8,10] }
],
} );
});
Спасибо