jQuery - 第三方表格插件DataTables使用详解5（宽高尺寸、滚动条的设置）

2018-03-17 发布：hangge 阅读：12535

八、高度相关设置

1，设置表格高度

（1）默认情况下表格的高度是随着内部条目数的变化而变化的（即所有数据都能显示出来）

（2）我们可以通过 scrollY 配置属性设置个固定高度，这样当表格内容超出显示范围时会自动出现滚动条。

注意：这个高度设置的是内容部分的高度，不包括表头、表尾。

scrollY 可以使用 px 设置固定高度：

$('#myTable').DataTable({
  "scrollY": "170px",  //表格内容部分高度设置为170像素
  //.....

scrollY 也可以使用 vh、vw 设置相对高度：

$('#myTable').DataTable({
  "scrollY": "50vh",  //表格内容部分高度设置为窗口的一半
  //.....

scrollY 也可以使用CSS3提供的calc()来智能地计算高度：

$('#myTable').DataTable({
  "scrollY": "calc(100vh - 100px)",  //表格内容部分高度设置为窗口高度-100px
  //.....

2，单元格高度自适应

（1）当我们设置了表格固定高度后，如果内容不足以填充满整个区域，默认情况下表格仍然会保持设置的这个高度。

（2）我们可以把 scrollCollapse 属性设置为 true，让表格高度随内容自适应。

$('#myTable').DataTable({
  "scrollY": "170px",  //表格内容部分高度设置为170像素
  "scrollCollapse": true,  //表格高度随内容自适应
  //.....

九、宽度相关设置

1，设置表格宽度

（1）默认情况下，表格横向是自动撑满 100% 宽度的。

（2）如果想要限制宽度可以通过 CSS 设置。

div.dataTables_wrapper {
  width: 500px;
  margin: 0 auto;
}

2，横向滚动条

（1）如果表格的宽度不足以显示出所有列的话，我们会希望它出现横向滚动条，具体效果如下：

（2）具体实现方式如下：

将 scrollX 配置属性设置为 true。
表格样式设置为不自动换行（white-space: nowrap;）

<script type="text/javascript">
  $(document).ready(function() {
    $('#myTable').DataTable({
      "scrollX": true,
      "ajax": 'data.txt',
    });
  });
</script>
<table id="myTable" style="white-space: nowrap; ">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>出生日期</th>
            <th>电话</th>
            <th>邮箱</th>
            <th>QQ</th>
        </tr>
    </thead>
</table>

3，列宽设置

（1）默认情况下表格列会根据它的内容自动调整宽度。

（2）我们也可以手动指定每一列的宽度。比如下面样例将每列宽度都设成一样的。

注意：宽度设置后还需要将 autoWidth 属性设置为 false，关闭自动列宽功能。

<script type="text/javascript">
  $(document).ready(function() {
    $('#myTable').DataTable({
      "autoWidth": false,
      "ajax": 'data.txt',
    });
  });
</script>

<table id="myTable">
    <thead>
        <tr>
            <th width="20%">编号</th>
            <th width="20%">姓名</th>
            <th width="20%">出生日期</th>
            <th width="20%">邮箱</th>
        </tr>
    </thead>
</table>