如何正确设计数据表？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何正确设计数据表？相关的知识，希望对你有一定的参考价值。
我有一个数据表，我想通过手机访问网站时将数据信息分页。我的问题是在我当前的数据表中，datainfo和分页按钮是内联的（请参见图片）。我想要实现的是datainfo将像第二张图片一样通过分页分隔。
Here is the image of my tableHere is the image of what I wanted to do
这是我用来初始化数据表的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.尝试从position: absolute;中删除.dataTables_paginate2.或者尝试将top:60px;添加到相同的.dataTables_paginate3.或者尝试将margin-top:60px;添加到相同的.dataTables_paginate您也可以将更改之一添加到css块的末尾并覆盖在@media内部，以便仅覆盖〜移动分辨率。
@media (max-width:640px)
.dataTables_paginate
margin-top:60px;
以上是关于如何正确设计数据表？的主要内容，如果未能解决你的问题，请参考以下文章