DataTables页眉和页脚显示不正确

时间:2012-07-05 03:50:13

标签: jquery datatables

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

1 个答案:

答案 0 :(得分:2)

看起来,你缺少数据表的'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中渲染无关紧要