jQuery DataTables - 我无法获得我想要的效果答案

【问题标题】：jQuery DataTables - I cannot get the desired effect I wantjQuery DataTables - 我无法获得我想要的效果
【发布时间】：2013-03-12 19:28:37
【问题描述】：

我不确定你需要多少信息来帮助我，所以如果我需要提供更多信息，请告诉我。

我正在使用带有 Themeroller 的 jQuery DataTables。我正在尝试完成这个外观：

但是，无论我尝试什么，这就是我得到的：

我用红色突出显示了我遇到问题的区域。基本上它是页眉和页脚。我知道图像有点难看，但好像页眉和页脚块只是部分被绘制。根据 Chrome，该区域为 1600 像素 x 12 像素。看起来应该至少 50px 或更多。

我包含以下 .css 文件：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title> - The Exchange Site</title>
        <link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        <link href="/Content/jquery.ui.theme.css" rel="stylesheet"/>
        <link href="/Content/site.css" rel="stylesheet"/>
        <link href="/Content/jquery.dataTables.css" rel="stylesheet"/>
        <link href="/Content/jquery.dataTables_themeroller.css" rel="stylesheet"/>
        <link href="/Content/PagedList.css" rel="stylesheet"/>

我的 HTML 底部的 JavaScript 如下：

<script>
    $(document).ready(function () {
        oTable = $('#buyerNotification').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "iDisplayLength": 25,
            "aaSorting": [[0, 'desc']]
        });
    });

当我在 Chrome 中检查页面时，没有产生任何错误。如果包含更多内容会有所帮助，我可以这样做，就像我的 HTML 一样，但它有很多。

【问题讨论】：

你也能显示你的html吗？只有一个 tbody 行应该是好的，但看到表结构会很好。所以你的桌子..thead..tbody 有一排
我不认为查看 HTML 会特别有用；它都是由 DataTables API 生成的。 Randy，我已经很久没有实现我的了，我不记得为什么了，但我记得保留了一些基本的 DataTables CSS，即使我也使用 jQuery UI。我还添加了一些我自己的自定义规则来补充 jQuery UI；看起来您的页眉和页脚没有布局。选择一个封装它们的选择器并尝试在它们上面加上“溢出：隐藏”。
当我们想在 fiddle/jsbin 中进行测试以查看问题到底是什么并看看我们是否可以复制它时，它非常有用
DataTables 有自己有用的沙箱：live.datatables.net -- Randy，也刚刚注意到包含 jQuery UI CSS 和“themeroller”CSS...应该只有一个 jQuery UI CSS任何类型的文件，所以我有点困惑。
好的，你能复制他的问题吗？

标签： jquery asp.net-mvc jquery-ui jquery-plugins themeroller

【解决方案1】：

见here。您是否指定了"bJQueryUI": true 选项？

【讨论】：

没关系。您刚刚添加了 javascript，选项就在那里。