Datatable使用问题01 - 响应式表格由PC到移动

在使用bootstrap开发前端页面时，使用Datatable.js渲染表格部分，但默认状态下的Datatable的表格在自适应时存在屏幕分辨率缩小到小于表格内容后表格内容便会开始换行，如下图1

在数据与列较多的情况下，自适应到小分辨率会出现内容堆积中一起的现象，影响阅读表格内容。

图1

自适应PC的小窗口

为了使表格的内容不再换行，有两种方法可以实现，但两种方法都有一些缺点，以下为详细说明

一、对表格中的数据进行截取

通过给表格中每个格添加以下css属性实现文字截取

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

在表格变小后表格内容截取后的效果如下图2
图2
存在的问题是屏幕分辨率变小后表格中的内容被截取掉的过多，不能很好的阅读到表格的信息。

二、保持表格的全长，同时使用滚动条

在设置文字单行显示后，保持表格宽度可以装下一行内全部内容的状态，并显示滚动条如下图3：
通过给容纳Datatable表格的外壳添加以下属性以显示出Datatable整体滚动的滚动条

overflow-x:auto;
max-width:100%;

图3

在这个状态下表格的翻页按钮也中滚动条的横向范围范围内，中按钮居右页数较多时会需要不断滚动滚动条才能按倒翻页按钮，操作起来不是很方便，如上图：

为避免以上的两种现象出现，中初始化Datatable表格时应用其自带的自适应滚动属性，
以实现；应用方法如下：

$('#example').dataTable( {
  	scrollX: true //启用横向滚动
	sScrollXInner: "100%" //表身最大宽度设置为100%
} );

在启用Datatable的横向滚动后，表格中出现滚动条时如下图4，滚动条将出现在翻页上方，翻页部分将不再随滚动条的滚动而一起滚动。
图4
至于表格最后一列中可能有操作按钮的情况，可以使用dataTables.fixedColumns.js表格固定列插件来使datatable表格的操作列可以固定在最后，这里不在详细介绍此固定列插件
图5

继续自适应到移动端

在表格使用滚动条进行内容滚动以适应小分辨率设备时，会出现表格的列数很多，窗口太小，操作起来需要不断横向前后滚动滚动条以查看表格内容的情况，非常不利于查看内容。
如果表格中有操作列，那不断横向滚动屏幕进行操作简直就是噩梦而且在固定了操作列时，剩余显示表格内容的空间更少了，非常不利于操作表格。
这时，如果表格可以显示的更接近移动端的表单，那么就更容易操作了，
图5

按照这个方式展示datatable表格，需要以下几个调整
1.将原有的表格表头隐藏。
2.将每个行变为一个独立的小板块。
3.将每条数据变为一个表单项
4.将每条数据添加上对应的列标题，以便于查看

现在我们要将这种自适应方式移植到Datatable的上面，同时不对Datatable插件本身进行修改。

1. 需要使Datatable的表头在手机版时隐藏，这个可以通过媒体查询来完成，因为之前我们启用Datatable的滚动功能后表格的头被分离生成为了class固定的单独表，所以可以使用以下代码对其隐藏，代码如下：

@media only screen and (max-width: 767px){
.dataTables_scrollHead{display:none;}
}

2.需要使原本表格中的每一个格单独占一整行，并去掉每个格的边线，仅在原本表格的每行留下边线以便对每行的数据进行区分。
实现代码如下：

.dataTables_scrollBody .table{
	 float: left;
    display:block;
    width: 100%;
}
.dataTables_scrollBody .table tbody {
	 float: left;
    display:block;
    width: 100%;
}
.dataTables_scrollBody .table tbody tr td {
    border-bottom: medium none !important;
    float: left;
    display:block;
    width: 100%;
}
.dataTables_scrollBody .table tbody tr {
    border-bottom: 1px solid #bbb !important;
    display:block;
     float: left;
    width: 100%;
}

此时的表格小分辨率样式如下图所示：

3.为表格添加标题，此时的标题因为是和数据在同一行内，故将标题在表格数据渲染时添加在列渲染的位置上，同表格的数据一同渲染在同一个td标签内即可。

渲染出来的HTML结构如下:

到此表格在自适应手机版时的样式即如下图所示，
为了更好的区分原版表格中的行，可以为每行数据之间添加一些间距，并给每条数据加上边框，此处便不在详细举例。

这样便实现了表格在PC端，多列的情况下可以使用横向滚动并固定列以便于查看并操作数据，在移动端时像表单一样对表格进行操作。避免尴尬的表格横向滚动操作了。如果你担心在表格变为表单时每行一块表单的显示方式使页面变得太长，需要向下滚动很久，你可以为表格添加上搜索，同时在移动端尺寸时减少每页显示的行数。