jQuery - 第三方表格插件DataTables使用详解7（交替行、边框等样式设置）

2018-03-22 发布：hangge 阅读：9009

十四、常用样式的修改

1，表格头部、尾部的边框样式

/** 表头样式**/
table.dataTable thead th, table.dataTable thead td {
  padding: 10px 18px;
  border-bottom: 1px solid #ff0000;
}

/** 表尾样式**/
table.dataTable tfoot th, table.dataTable tfoot td {
  padding: 10px 18px 6px 18px;
  border-top: 1px solid #ff0000;
}

2，数据行边框样式

<style media="screen">
  /** 数据行样式 **/
  table.dataTable.row-border tbody th, table.dataTable.row-border tbody td,
  table.dataTable.display tbody th, table.dataTable.display tbody td {
    border-top: 1px solid #ff0000;
  }

  table.dataTable.row-border tbody tr:first-child th,
  table.dataTable.row-border tbody tr:first-child td,
  table.dataTable.display tbody tr:first-child th,
  table.dataTable.display tbody tr:first-child td {
    border-top: none;
  }
</style>

<table id="myTable" class="row-border">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>出生日期</th>
        </tr>
    </thead>
</table>

3，单元格边框样式

<style media="screen">
  /** 单元格样式 **/
  table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td {
    border-top: 1px solid #ff0000;
    border-right: 1px solid #ff0000;
  }

  table.dataTable.cell-border tbody tr th:first-child,
  table.dataTable.cell-border tbody tr td:first-child {
    border-left: 1px solid #ff0000;
  }

  table.dataTable.cell-border tbody tr:first-child th,
  table.dataTable.cell-border tbody tr:first-child td {
    border-top: none;
  }
</style>

<table id="myTable" class="cell-border">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>出生日期</th>
        </tr>
    </thead>
</table>

4，数据行背景色

/** 数据行背景色 **/
table.dataTable tbody tr {
  background-color: #FFE4AA;
}

5，鼠标悬停行高亮

/** 鼠标悬停数据行样式 **/
table.dataTable tbody tr:hover {
  background-color: #ffff00;
}

6，鼠标悬停单元格样式

/** 鼠标悬停单元格样式 **/
table.dataTable tbody td:hover {
  background-color: #ffff00;
}

十五、紧凑型表格

（1）默认情况下行与行间，单元格与单元格之间的间距都是比较大的。

（2）下面通过样式设置让表格更加紧凑。

<style media="screen">
  /** 单元格内边距社设置 **/
  table.dataTable.compact thead th, table.dataTable.compact thead td {
    padding: 4px 17px 4px 4px;
  }

  table.dataTable.compact tfoot th, table.dataTable.compact tfoot td {
    padding: 4px;
  }

  table.dataTable.compact tbody th, table.dataTable.compact tbody td {
    padding: 4px;
  }
</style>

<table id="myTable" class="compact">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>出生日期</th>
        </tr>
    </thead>
</table>

十六、交替行背景色设置

假设我们需要将表格背景色变成如下斑马条状：

这个有两种方式可以实现。

方法一：直接在 CSS 中设置奇、偶行的样式

<style media="screen">
  /*** 奇数行颜色设置 ***/
  table.dataTable.stripe tbody tr.odd,
  table.dataTable.display tbody tr.odd {
    background-color: #f9f9f9;
  }

  /*** 偶数行颜色设置 ***/
  table.dataTable.stripe tbody tr.even,
  table.dataTable.display tbody tr.even {
    background-color: #ffffff;
  }
</style>

<table id="myTable" class="stripe">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>出生日期</th>
        </tr>
    </thead>
</table>

方法二：初始化的时候指定行样式

（1）比如下面代码，将第 1 行 tr 的 class 设为 stripe1，第 2 行 tr 的 class 设为 stripe2，到了第 3 行又变成 stripe1 .....以此类推。

<style media="screen">
  /*** 奇数行颜色设置 ***/
  table.dataTable tbody tr.stripe1 {
    background-color: #f9f9f9;
  }

  /*** 偶数行颜色设置 ***/
  table.dataTable tbody tr.stripe2 {
    background-color: #ffffff;
  }
</style>

<table id="myTable">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>出生日期</th>
        </tr>
    </thead>
</table>

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

（2）当然 stripeClasses 数组里的个数不仅限于两个。比如下面代码，第 123 行 tr 的 class 分别是：stripe1、stripe2、stripe3，第 456 行 tr 的 class 同样分别是：stripe1、stripe2、stripe3，....后面依次类推。

<script type="text/javascript">
  $(document).ready(function() {
    $('#myTable').DataTable({
      "ajax": 'data.txt',
      "stripeClasses": ['stripe1', 'stripe2', 'stripe3'],
    });
  });
</script>

十七、控制器相关样式

1，控制器标签文本样式

/** 控制器标签颜色设置 **/
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_processing,
.dataTables_wrapper .dataTables_paginate {
    color: #ff0000;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #ff0000 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: #ff0000 !important;
}

2，分页按钮样式

下面分别设置分页按钮在鼠标移入后，以及处于激活状态（当前页面）下的样式。

/** 分页按钮鼠标移入时的样式 **/
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
   color: white !important;
   border: 1px solid #1822ad;
   background-color: #6a72ea;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6a72ea),
    color-stop(100%, #1822ad));
   /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #6a72ea 0%, #1822ad 100%);
   /* Chrome10+,Safari5.1+ */
   background: -moz-linear-gradient(top, #6a72ea 0%, #1822ad 100%);
   /* FF3.6+ */
   background: -ms-linear-gradient(top, #6a72ea 0%, #1822ad 100%);
   /* IE10+ */
   background: -o-linear-gradient(top, #6a72ea 0%, #1822ad 100%);
   /* Opera 11.10+ */
   background: linear-gradient(to bottom, #6a72ea 0%, #1822ad 100%);
   /* W3C */
 }

/** 当前激活的分页按钮样式 **/
 .dataTables_wrapper .dataTables_paginate .paginate_button:active {
   outline: none;
   background-color: #1e2bda;
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1e2bda),
    color-stop(100%, #1720a4));
   /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(top, #1e2bda 0%, #1720a4 100%);
   /* Chrome10+,Safari5.1+ */
   background: -moz-linear-gradient(top, #1e2bda 0%, #1720a4 100%);
   /* FF3.6+ */
   background: -ms-linear-gradient(top, #1e2bda 0%, #1720a4 100%);
   /* IE10+ */
   background: -o-linear-gradient(top, #1e2bda 0%, #1720a4 100%);
   /* Opera 11.10+ */
   background: linear-gradient(to bottom, #1e2bda 0%, #1720a4 100%);
   /* W3C */
   box-shadow: inset 0 0 3px #111;
 }