Question

DataTables我遇到了标题和页脚样式的问题。

问题：

标题在新行上有搜索框，而不是在同一行float-right。
此处的分页按钮/图标也显示在新行上。
页脚按钮显示为笑。

enter image description here

我已经尝试排除除平滑度之外的所有其他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>

这是页眉和页脚的外观： enter image description here

Answer 1

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

在iFrame中渲染无关紧要

DataTables页眉和页脚显示不正确

1 个答案: