数据表的问题答案

【问题标题】：Trouble with DataTables数据表的问题
【发布时间】：2013-05-31 00:24:56
【问题描述】：

我在使用 jQuery 库 DataTables 时遇到问题。我遵循了他们的文档，遇到了一个奇怪的问题。首先，我尝试使用 FixedColumn 功能，但即使他们提供的示例也无法运行（至少不是从 http://datatables.net/extras/fixedcolumns/# 链接的 jsBin 设置中的那个）。不过，我主要担心的是我根本无法从 DataTables 中获得任何功能。我已经创建了一个简化版本的网站，我正在尝试使用它来定位问题，简化的代码在 jsBin 中（在一定程度上）有效，但在我自己的系统上根本无效。简化的代码包含在下面。有谁知道是什么导致了这个问题？

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
    <script>
    $(document).ready(function () {
        var travelTableScroll = $('#travelTable').dataTable();

        new FixedColumns(travelTableScroll);
    });
    </script>
</head>

<body>
    <table id="travelTable" class="display">
        <thead>
            <tr>
                <th>Employee</th>
                <th>January</th>
                <th>February</th>
                <th>March</th>
                <th>April</th>
                <th>May</th>
                <th>June</th>
                <th>July</th>
                <th>August</th>
                <th>September</th>
                <th>October</th>
                <th>November</th>
                <th>December</th>
                <th>January</th>
                <th>February</th>
                <th>March</th>
                <th>April</th>
                <th>May</th>
                <th>June</th>
                <th>July</th>
                <th>August</th>
                <th>September</th>
                <th>October</th>
                <th>November</th>
                <th>December</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
            <tr>
                <td>test</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

更新：好吧，我已经尝试向每行添加适当数量的单元格，如下所示。此外，我还包含了 FixedColumns 的链接（我假设它是 DataTables 的一部分，不需要单独包含，但我猜不是）。但是，我仍然没有获得任何功能。我不确定这是否是同一个问题（过去一年我不知何故忘记了控制台输出的存在——我已经离开网页设计很长时间了），但现在我收到了错误@ 987654323@。我在 Google 上做了一些查找，可能的原因似乎是 DataTables 未加载或 jQuery 已加载两次。我不知道问题出在哪里，但问题之前的唯一链接/脚本行如下：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="http://datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js"></script>

最终更新：我找到了最后一个问题的根源——结果是，由于我使用的是来自可怕的 Microsoft 的 Visual Studio 编辑器的 .NET 框架，所以我没有看到布局文件完全，并且其中有一行导入了其他版本的 jQuery。显然这就是问题所在，因为一旦我删除它，表格就会开始正确渲染。感谢大家的帮助！

【问题讨论】：

太棒了！我自己喜欢数据表。

标签： javascript jquery datatables

【解决方案1】：

首先，<tbody> 内部的<td> 的数量必须与<thead> 内部的<th> 的数量完全匹配。您有很多行，只有一列。 DataTables 将无法初始化（正如您在控制台中看到的那样）这就是您无法从 DataTables 获得任何功能的原因。

要以简单的方式创建测试行，请在初始化 dataTables 之前使用这样的函数

function getTestRow() {
    var testRow = '';
    for (var i=0;i<$('#travelTable th').length;i++) {
        var rand = Math.floor((Math.random()*100)+1);
        testRow+='<td>col '+rand+'</td>';
    }
    testRow='<tr>'+testRow+'</tr>';
    return testRow;
}

//$(document).ready(function () { ..
for (var i=0;i<100;i++) {
    $('#travelTable tbody').append(getTestRow());
}

现在 DataTable 将正确初始化。

其次，为了使用 FixedColumns，您必须至少在源代码中包含 FixedColumns :-)

<script type="text/javascript" src="http://datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js"></script>

当然，还有指向您本地版本的数据表的链接。在第 99 行的 FixedColumns 中有一个错误，“bOldIE": ($.browser.msie ... outcomment 该行。我想这就是为什么 jsbin 示例也不起作用（FixedColumns 未定义）

使用固定列：

var travelTableScroll = $('#travelTable').dataTable({
    sScrollX: "100%",
    sScrollXInner: "150%"
});
new FixedColumns(travelTableScroll);

上述代码的工作版本：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="http://datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js"></script>
<script>
function getTestRow() {
    var testRow = '';
    for (var i=0;i<$('#travelTable th').length;i++) {
        var rand = Math.floor((Math.random()*100)+1);
        testRow+='<td>col '+rand+'</td>';
    }
    testRow='<tr>'+testRow+'</tr>';
    return testRow;
}

$(document).ready(function () {
    //insert some test rows
    for (var i=0;i<100;i++) {
        $('#travelTable tbody').append(getTestRow());
    }

    //initialize
    var travelTableScroll = $('#travelTable').dataTable({
        sScrollX: "100%",
        sScrollXInner: "150%"
    });
    new FixedColumns(travelTableScroll);
});
</script>
</head>

<body>
    <table id="travelTable" class="display">
        <thead>
            <tr>
                <th>Employee</th>
                <th>January</th>
                <th>February</th>
                <th>March</th>
                <th>April</th>
                <th>May</th>
                <th>June</th>
                <th>July</th>
                <th>August</th>
                <th>September</th>
                <th>October</th>
                <th>November</th>
                <th>December</th>
                <th>January</th>
                <th>February</th>
                <th>March</th>
                <th>April</th>
                <th>May</th>
                <th>June</th>
                <th>July</th>
                <th>August</th>
                <th>September</th>
                <th>October</th>
                <th>November</th>
                <th>December</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</body>
</html>

【讨论】：

【解决方案2】：

这样的 jsfiddle 会很棒 - 您不应该使用一些 x 和 y 滚动选项进行初始化吗？

例如。 "sScrollY": "300px", "sScrollX": "100%", "sScrollXInner": "150%", “bScrollCollapse”：真， “bPaginate”：错误

【讨论】：

您的标题列数需要与数据列数相匹配-见[链接]stackoverflow.com/questions/11215258/…

【解决方案3】：

不知道为什么DataTables的webiste中的代码是这样的，但是通过设置sScrollY属性（通常与bPaginate一起）得到固定的表头：

var oTable = $('#travelTable').dataTable( {
    "sScrollY": "300px",
    "bPaginate": false
} );

另外正如 Lil Piggy 提到的，请记住 <thead> 上的列数与 <tbody> 中的列数相匹配

JSBin DEMO

【讨论】：

【解决方案4】：

您已使用滚动选项进行初始化

例如。 "sScrollY": "300px", "sScrollX": "100%", "sScrollXInner": "150%", “bScrollCollapse”：真， “bPaginate”：错误

var oTable = $('#travelTable').dataTable( { "sScrollX": "100%", "sScrollXInner": "110%", "bScrollCollapse": true}); new FixedColumns(oTable); [链接]http://jsfiddle.net/kmcadams/bgf8g/ ` 您必须包含固定列额外的 js 脚本

【讨论】：