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>

它不起作用。

提前致谢！

这是表格。 http://thesgn.com/board/index.php?pages/Members/

Answer 1

问题是您忘记包含dataTables.responsive.js文件。除此之外你还在身体中使用<link>标签，这与你使用它的方式不相称。

请参阅DataTables Responsive extension documentation进行正确的初始化。

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

<!-- 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>部分的任何位置{1}}。

<!-- 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>

我在您的页面上看到您正在进行自己的表格样式，在这种情况下您可能会省略DataTables CSS。

如何为DataTables启用响应式扩展？

1 个答案: