个人中心
gpt4 book ai didi

javascript - 数据表的问题

转载 作者：塔克拉玛干 更新时间：2023-11-02 21:19:05 24 4
gpt4 key购买 nike

我在使用 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 获得任何功能的原因。

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

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>

当然，链接到您本地版本的数据表。 FixedColumns 中的第 99 行有一个错误，“bOldIE": ($.browser.msie ... 超出该行的注释。我想这就是为什么 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>

enter image description here

关于javascript - 数据表的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16823283/

24 4 0
文章推荐： ios - Jenkins CI : How to trigger jenkins jobs based on different Xcode project configurations
文章推荐： ios - bolt Apple Mach-O 链接器错误
文章推荐： ios - XCode:找出在异常断点处停止时抛出的异常
文章推荐： javascript - 无法运行 Grunt `watch` 任务？
塔克拉玛干
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com