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的一部分，不需要单独包含，但我猜不是）。但是，我仍然没有获得任何功能。我不确定这是否是同样的问题（过去一年我忘记了控制台输出的存在 - 我已经远离网页设计很长一段时间了），但现在我收到了错误{ {1}}。我已经在Google上做了一些工作，可能的原因似乎是没有加载DataTables或者jQuery已经加载了两次。我无法弄清楚问题的来源，但在相关问题之前唯一的链接/脚本行如下：

TypeError: $(...).dataTable is not a function

最终更新：我发现最后一个问题的根源 - 原因是，由于我使用的是可怕的Microsoft Visual Studio编辑器中的.NET框架，我没有看到布局文件完全，并在那里导入了一些其他版本的jQuery。显然这就是问题所在，因为一旦我删除它，表就会开始正确呈现。谢谢你的帮助！

Answer 1

首先，<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>

enter image description here

Answer 2

一个jsfiddle，这将是伟大的 - 你不应该初始化一些x和y滚动选项？

例如。 “sScrollY”：“300px”， “sScrollX”：“100％”， “sScrollXInner”：“150％”， “bScrollCollapse”：是的， “bPaginate”：false

Answer 3

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

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

Lil Piggy提及

，请注意<thead> HAS上的列数与<tbody>

中的列数相匹配

<强> JSBin DEMO

Answer 4

您已使用滚动选项初始化

例如。 “sScrollY”：“300px”， “sScrollX”：“100％”， “sScrollXInner”：“150％”， “bScrollCollapse”：是的， “bPaginate”：false

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

DataTables的问题

4 个答案: