javascript – DataTables的麻烦

2023年8月12日 210次阅读

我在使用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不是一个函数.我已经在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.显然这就是问题所在,因为一旦我删除它,表就会开始正确呈现.感谢您的帮助！

最佳答案首先,< td>内部< tbody>的数量.必须匹配< th>里面< thead>的数量究竟.你有很多行只有一列. DataTables将无法初始化(正如您在控制台中看到的那样)这就是为什么您无法从DataTables获得任何功能.

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

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>