初始化

可以采用三种不同的方式启用 DataTables 的响应功能

向 HTML 表格添加类 responsive
使用 responsive DataTable 选项
使用 $.fn.dataTable.Responsive 构造函数

类

要通过类名称为 DataTable 启用响应功能，请添加

responsive 或
dt-responsive

到 HTML 表格的类列表中。例如

<table class="display responsive nowrap" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
        </tr>
    </thead>
    ...
</table>

响应功能会自动检测使用分配给表格的任一类在页面上创建的 DataFrame。如果存在这些类，响应功能会使用默认配置选项对自身进行初始化。

为这种自动初始化提供了两种类名称作为选项，因为类 responsive 相对常见，在 CSS 中可能已经具有某些定义的含义，或者在使用框架的情况下，该框架可能已经具有某些定义的含义。例如，在 Bootstrap 中，responsive 类用于滚动表格（在 DataTables 中使用 scrollX 选项也可实现）。

请注意，在上面的示例中，DataTables nowrap 类也已添加到表格中。对于响应式布局，这可能特别有用，因为它禁用了表格中文本内容的换行，从而使所有文本保持在一行上。如果没有这个类（或在表格的 CSS 中使用 white-space CSS 选项），浏览器会尝试将表格中的文本折叠到多行上以减少水平空间。其结果是，浏览器窗口在响应功能移除列之前需要小得多。

请参阅 DataTables 样式表选项，以了解有关可用选项的更多信息。

选项

还可以使用 responsive 选项为 DataTable 启用响应功能。此选项使用起来简单，只需在 JavaScript 中使用，并且还能够自定义响应功能的配置选项。

在最简单的形式中，responsive 选项可以用作布尔值，以指示是否应为该表格启用响应功能

$('#example').DataTable( {
    responsive: true
} );

它还可用作对象，其属性定义要用于该实例的配置选项。当作为选项提供时，假定已为表格启用了响应功能（需要禁用时使用 false）。可用的选项的完整列表在响应功能参考中做了说明。

在以下示例中，我们把 responsive 作为了一个对象，与 responsive.details 选项配合使用，以禁用将折叠的详细信息显示在子行中的默认行为

$('#example').DataTable( {
    responsive: {
        details: false
    }
} );

构造函数

针对数据表格初始化响应的最终方法是使用 $.fn.dataTable.Responsive 构造函数直接初始化实例。如果你需要在一个数据表格初始化后添加响应，并且没有任何能力在该点之前添加 responsive 类，这时会很有用。

构造函数采用两个参数

要添加响应的数据表格。这可以是一个 DataTables API 实例、一个表的 jQuery 选择器，或者一个包含表格的 jQuery 对象，表格作为其结果集中的唯一节点。
可选的 - 配置参数。它们与 responsive 的相同选项。如果未给出默认配置选项将被使用。

在以下示例中，我们初始化了一个数据表格，然后通过使用构造函数方法向其添加了响应功能。请注意，你必须包含关键词 new 才能用于构造函数，因为对于每个表，都必须新建一个实例。

var table = $('#example').DataTable();

new $.fn.dataTable.Responsive( table, {
    details: false
} );