Javascript 如何正确设计数据表？

我有一个datatable，我想在手机上访问我的站点时将数据信息与分页分开。我的问题是在我当前的datatable中，datainfo和分页按钮是内联的（请参见图）。我想要实现的是，数据信息将与第二幅图中的分页分离

下面是我用来初始化datatable的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;
}

---

一个简单的方法就是为数据信息提供一个空白。由于信息和分页重叠，请尝试在该页边距上添加边距。如果.dataTables_paginate是整个分页条的类，那么也可以尝试添加top。希望能有帮助

有几种方法可以实现这一点：） 1.尝试删除

位置：绝对来自
.dataTables\u paginate
2.或者尝试添加
top:60px到相同的
。数据表\u paginate
3.或者尝试添加
页边距顶部：60px到相同的
。数据表\u paginate
此外，您还可以将其中一项更改添加到css块的末尾，并在
@media
中进行覆盖，以便仅覆盖~mobile分辨率


@介质（最大宽度：640px）{
.dataTables_paginate{
边缘顶部：60像素；
}
}
需要你的css按钮来回答：）@V.Volkov抱歉，我忘了我更新了我的问题并包含了我使用的CSS。现在确定有没有办法将分页居中？确定：）您使用了哪个选项？我将.dataTables_paginate的位置更改为相对。现在的问题是如何将分页居中？尝试添加
display:block；浮动：无连同提到的边距，或尝试添加
文本对齐：居中到父元素。