0

我在使用页眉和页脚样式的DataTables时遇到问题。

问题：

  • 标题将搜索框放在新行上，而不是在同一行上浮动。
  • th 的分页按钮/图标也显示在新行上。
  • 页脚按钮显示为模糊。

在此处输入图像描述

我已经尝试排除除平滑度之外的所有其他 css 文件（这使它看起来是灰色的）。我错过了一些设置吗？我在整个网站上查看了示例，但他们没有提到这个问题。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link href="css/smoothness/jquery-ui-1.8.21.custom.css" rel="stylesheet" type="text/css" />
    <script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.dataTables.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.dataTables.nightly.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        oTable = $('#num2').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers"
        });
    } );

    </script>

</head>
<body>
        <table id="num2">

            <thead>
            <tr>
                <th>
                num 1
                </th>
                <th>
                num 2
                </th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>john
                </td>
                <td>
                joe
                </td>
            </tr>
            </tbody>

        </table>
</body>
</html>

这是页眉和页脚的外观： 在此处输入图像描述

4

1 回答 1

2

从外观上看，您缺少数据表的“结构”CSS 文件。我自己没有使用过 Datatables，但我对 jQuery 和 jQuery UI 有很多经验，而且 CSS 文件在“结构”和“主题”之间非常清晰地分开。现在我注意到您已经包含了 css/smoothness/jquery-ui-1.8.21.custom.css 文件，该文件（假设您勾选了下载站点上的所有框）包含标准小部件的所有结构 CSS（手风琴、对话框、选项卡等）和一个主题（平滑度）。我认为您缺少的是 DataTables 结构 CSS 文件，它不是 jQuery UI 的默认小部件，因此需要从 DataTables 站点获取。看看他们网站上的主题滚轮示例，他们还有一个 /demo_table_jui.css 的 CSS 文件”

在 iFrame 内渲染应该无关紧要

于 2012-07-05T04:19:19.710 回答