javascript - 数据表的问题

Question

我在使用 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 的一部分，不需要单独包含，但我想不是）。但是，我仍然没有获得任何功能。我不确定这是否是同一个问题（过去一年我不知何故忘记了控制台输出的存在——我已经离开网页设计很长时间了），但现在我得到了错误TypeError: $(...).dataTable is not a function。我在 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。显然这就是问题所在，因为一旦我删除它，表格就会开始正确呈现。感谢所有的帮助！

score 2 · Accepted Answer

首先，<td>内部<tbody>的数量必须与内部的数量<th>完全匹配<thead>。您有很多行，只有一列。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 ... 注释掉该行。我想这就是 jsbin 示例也不起作用的原因（FixedColumns 未定义）

使用 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>

在此处输入图像描述

score 0 · Accepted Answer

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

例如。“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脚本

score 0 · Accepted Answer

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

例如。“sScrollY”：“300px”，“sScrollX”：“100%”，“sScrollXInner”：“150%”，“bScrollCollapse”：真，“bPaginate”：假

score 0 · Accepted Answer

我不知道为什么DataTables的webiste中的代码是这样的，但是通过设置sScrollY属性（通常与bPaginate）获得固定的标题：

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

同样正如 Lil Piggy 提到的，请记住<thead>HAS 上的列数与<tbody>

JSBin 演示

javascript - 数据表的问题

4 回答 4

Related

Reference