如何为DataTables启用响应扩展



所以文档中说我需要添加以下内容:

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

问题是您忘记包含dataTables.responsive.js文件。此外,你在身体里使用<link>标签,这是不可取的,你使用它的方式

有关正确初始化,请参阅DataTables Responsive扩展文档。

建议您将以下代码放在<head>部分中jQuery库<script src="js/jquery/jquery-1.11.0.min.js"></script>之后,以正确初始化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>中的任何位置。

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

最新更新