jQuery.datatables.js插件用法及api实例详解

什么是jQuery.datatables.js插件

jQuery.datatables.js是一个基于jQuery的表格插件，能够让我们十分简单便捷地实现诸如表格分页、排序、查询等交互操作。此外，它还有强大的扩展功能，支持自定义主题、表格重绘等。它是一个非常流行的表格插件，且有丰富的文档和社区支持，可以满足大部分数据需求。

安装jQuery.datatables.js插件

使用jQuery.datatables.js非常简单，只需要先导入依赖的库文件即可。具体步骤如下：

下载jQuery库文件，并在页面的<head>标签中引入：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

下载datatables.js文件，并在页面的<head>标签中引入：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.22/datatables.min.js"></script>

在页面中定义表格并初始化：

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>小明</td>
      <td>18</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>20</td>
      <td>女</td>
    </tr>
  </tbody>
</table>
<script>
  $(document).ready(function() {
    $('#example').DataTable();
  } );
</script>

上述代码中，我们定义了一个id为example的表格，并在<script>标签中初始化Datatables插件，这样我们的表格就可以使用Datatables插件来实现交互操作了。

Datatables插件的基本用法

表格分页

为了实现表格分页，我们只需要在初始化Datatables插件的时候传入paging参数即可：

$(document).ready(function() {
  $('#example').DataTable( {
    "paging": true
  });
});

这样我们的表格就会自动分页。此外，如果我们想控制每页显示的行数，可以传入pageLength参数：

$(document).ready(function() {
  $('#example').DataTable( {
    "paging": true,
    "pageLength": 5
  });
});

这样我们的表格每页就会显示5行数据。

表格排序

为了实现表格排序，我们只需要在初始化Datatables插件的时候传入ordering参数即可：

$(document).ready(function() {
  $('#example').DataTable( {
    "ordering": true
  });
});

这样我们的表格就会自动排序。此外，我们可以指定默认的排序方式和排序列：

$(document).ready(function() {
  $('#example').DataTable( {
    "ordering": true,
    "order": [[ 1, "desc" ]]
  });
});

上述代码中，我们指定了默认以第2列降序排列。

Datatables插件的高级用法

表格筛选

Datatables插件内置了逐列筛选功能，我们只需要在表格上方添加<input>标签即可。比如，我们定义了两个<input>标签分别用于筛选姓名、性别两列：

<input type="text" id="name" placeholder="姓名">
<input type="text" id="gender" placeholder="性别">
<script>
  $(document).ready(function() {
    $('#example').DataTable( {
      "paging": true,
      "ordering": true,
      initComplete: function () {
        this.api().columns().every( function () {
          var column = this;
          $( 'input', column.header() ).on( 'keyup change clear', function () {
            if ( column.search() !== this.value ) {
              column.search( this.value ).draw();
            }
          });
        });
      }
    });
  });
</script>

上述代码中，我们定义了两个<input>标签，并在<script>标签中设置Datatables插件的initComplete回调函数，用于初始化表格。在回调函数中，我们遍历了每一列，并为每列添加了keyup、change、clear事件，当我们在<input>标签中输入关键词时，就可以实现对对应列的筛选了。

表格扩展功能

Datatables插件还有许多强大的扩展功能，例如自定义主题、表格重绘等。此处我们以自定义主题为例：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.flash.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js"></script>

<script>
  $(document).ready(function() {
    $('#example').DataTable( {
      "paging": true,
      "ordering": true,
      dom: 'Bfrtip',
      buttons: [{
        extend: 'csv',
        exportOptions: {
          columns: ':visible'
        }
      }, {
        extend: 'pdf',
        exportOptions: {
          columns: ':visible'
        }
      }, {
        extend: 'print',
        exportOptions: {
          columns: ':visible'
        }
      }]
    });
  });
</script>

上述代码中，我们不仅导入Datatables插件库，还导入了Buttons扩展库，并在初始化Datatables插件时指定了dom和buttons参数，用于生成带有“导出CSV”、“导出PDF”、“打印”按钮的表格。这样我们就能够在网页上快速导出表格数据。

总结

以上就是关于jQuery.datatables.js插件的基础用法和高级用法的详解。通过使用这个插件，我们可以十分轻松地实现表格分页、排序、筛选等交互操作，并且还能够进行各种扩展。如果您是一个需要频繁展示数据的站长，那么这个插件绝对是您的不二选择。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery.datatables.js插件用法及api实例详解 - Python技术站

jQuery.datatables.js插件用法及api实例详解

jQuery.datatables.js插件用法及api实例详解

什么是jQuery.datatables.js插件

安装jQuery.datatables.js插件

Datatables插件的基本用法

表格分页

表格排序

Datatables插件的高级用法

表格筛选

表格扩展功能

总结

相关文章