Как правильно оформить данные?

Question

У меня есть дата, и я хочу отделить данные от пагинации при доступе к моему сайту на моем телефоне. Моя проблема в том, что в моей текущей таблице данных кнопки ввода данных и пагинации были встроены (см. Изображение). Чего я хотел добиться, так это того, что данные будут разделены нумерацией страниц, как на втором изображении.

Вот изображение моей таблицы Вот изображение того, что я хотел сделать

Вот javascript, который я использовал для инициализации таблицы данных:

var table = jQuery('#datatable').DataTable({
    "paging": true,
    "scrollY": false,
    "scrollX": true,
    "scrollCollapse": true,
    "ordering": true,
    "autoWidth": false,
    "fixedHeader": {
        "header": false,
        "footer": false
    },
    "lengthMenu": [ [5, 10, 25, 50, -1], [5, 10, 25, 50, "All"] ],
    "columnDefs": [
        { "width": "150px", "targets": 0 },
        { "width": "150px", "targets": 1 },
        { "width": "200px", "targets": 2 }
    ],
    "language": {
        "processing": "Processing...",
        "paginate": {
            "first": "First",
            "last": "Last",
            "next": "Next",
            "previous": "Previous"
        },
        "emptyTable": "No data found",
        "searchPlaceholder": "Search...",
        "search": ""
    }
});

Вот мой CSS используется для датируемой информации и нумерации страниц:

.dataTables_paginate {
    position: absolute;
    display: inline-block;
    right: -5px;
    bottom: 0;
}

.dataTables_info {
    margin-top: 13px;
    color: #bcbec0;
}

.dataTables_paginate .paginate_button.disabled {
    color: #d7d9e0;
    pointer-events: none;
    cursor: auto;
    background-color: #f8f9fa;
}

.dataTables_paginate .paginate_button.next, .dataTables_paginate .paginate_button.previous {
    padding-right: 15px;
    padding-left: 15px;
}

.dataTables_paginate .paginate_button {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    min-width: 36px;
    padding: 10px;
    margin: 0 5px;
    font-size: 11px;
    font-weight: 700;
    color: #a4a6a8;
    text-transform: uppercase;
    cursor: pointer;
    background-color: #f8f9fa;
    border: 0;
    border-radius: .25rem;
    -webkit-transition: background-color .15s ease-in-out, color .15s ease-in-out;
    -o-transition: background-color .15s ease-in-out, color .15s ease-in-out;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

Answer 1

Есть несколько способов сделать это :) 1. Попробуйте удалить position: absolute; из .dataTables_paginate 2. Или попробуйте добавить top:60px; к тому же .dataTables_paginate 3. Или попробуйте добавить margin-top:60px; к тому же .dataTables_paginate Также вы можете добавить одно из изменений в конец блока css и закрыть его внутри @media, чтобы оно охватывало только ~ мобильное разрешение.

@media (max-width:640px) {
  .dataTables_paginate {
    margin-top:60px;
  }
}

Answer 2

Один из простых способов решить эту проблему - предоставить поле для данных. поскольку информация и нумерация страниц перекрываются, попробуйте добавить к этому поле. и если .dataTables_paginate является классом для всей панели разбивки на страницы, то попробуйте добавить top к этому aswell. Надеюсь, поможет.