如何为数据表启用响应式扩展？

Question

所以文档说我需要添加这个：

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/1.0.5/css/dataTables.responsive.css">

和

responsive: true

所以这是我的代码：

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/1.0.5/css/dataTables.responsive.css">

<script>
$(document).ready(function() {
    $('#example').dataTable( {
        "paging": false,
        responsive: true
    } );
} );
</script>

它不起作用。

提前致谢！

这里是table。 http://thesgn.com/board/index.php?pages/Members/

Answer 1

问题是您忘记包含 dataTables.responsive.js 文件。此外，您在 body 中使用了 <link> 标签，您使用它的方式是不可取的。

请参阅 DataTables Responsive extension documentation 了解正确的初始化。

建议您在 <head> 部分中的 jQuery 库 <script src="js/jquery/jquery-1.11.0.min.js"></script> 之后放置以下代码，以正确初始化 DataTables 和响应式扩展。

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css"> 

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.js"></script>

<!-- DataTables Responsive -->
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/1.0.5/css/dataTables.responsive.css">
<script type="text/javascript" src="//cdn.datatables.net/responsive/1.0.5/js/dataTables.responsive.js"></script>

但是，如果您使用的是 CMS，并且不能或不知道如何编辑 <head> 部分中的代码，您也可以将以下代码放在 <body> 中的任意位置.

<!-- DataTables CSS -->
<link itemprop="css_datatables" type="text/css" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css"> 

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.6/js/jquery.dataTables.js"></script>

<!-- DataTables Responsive -->
<link itemprop="css_datatables_responsive" type="text/css" href="//cdn.datatables.net/responsive/1.0.5/css/dataTables.responsive.css">
<script type="text/javascript" src="//cdn.datatables.net/responsive/1.0.5/js/dataTables.responsive.js"></script>

我在你的页面上看到你正在做自己的 table 样式，在这种情况下你可以省略 DataTables CSS。

如何为数据表启用响应式扩展？

How do I enable responsive extension for DataTables?

html

jquery

datatables

jquery-datatables