Проблемы с таблицами данных и скроллером - загрузка последней страницы - PullRequest
Новая
       14

Проблемы с таблицами данных и скроллером - загрузка последней страницы

0 голосов
/ 26 апреля 2020

У меня есть страница с начальной загрузкой 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] }
        ],
    } );
});

Спасибо

...