当前位置： 文江博客话题详情

在继续使用JavaScript加载到后台时，部分显示CSV文件？

发布于 2025-02-12 15:50:24 字数 3812 浏览 0 评论 0原文

我在本地服务器上有以下文件：

data.csv：

（这是一个非常巨大的.csv文件，超过350.000行。）

Day,Hour,N1,N2,N3,N4,N5,N6,N7,N8,N9,N10,N11,N12,N13,N14,N15,N16,N17,N18,N19,N20
1996-03-18,15:00,4,9,10,16,21,22,23,26,27,34,35,41,42,48,62,66,68,73,76,78
1996-03-19,15:00,6,12,15,19,28,33,35,39,44,48,49,59,62,63,64,67,69,71,75,77
1996-03-21,15:00,2,4,6,7,15,16,17,19,20,26,28,45,48,52,54,69,72,73,75,77
1996-03-22,15:00,3,8,15,17,19,25,30,33,34,35,36,38,44,49,60,61,64,67,68,75
1996-03-25,15:00,2,10,11,14,18,22,26,27,29,30,42,44,45,55,60,61,66,67,75,79
1996-03-26,15:00,4,10,12,19,20,22,30,31,32,37,44,45,55,57,60,61,64,69,70,72
1996-03-28,15:00,1,4,9,11,12,13,15,26,32,35,39,40,49,53,62,63,72,73,77,78
1996-03-29,15:00,3,9,13,14,24,27,29,32,35,41,44,47,49,50,61,64,66,69,72,73
1996-04-01,15:00,2,4,6,9,12,14,20,21,25,35,39,43,44,45,48,50,52,61,69,72

...

main.js：

（它正在加载data.csv，并从 index.html。）

// (A) GET HTML TABLE
//let table = document.getElementById("data_table");

// (B) AJAX FETCH CSV FILE
fetch("data.csv")
    .then((res) => { return res.text(); })
    .then((csv) => {
        // (B1) REMOVE OLD TABLE ROWS
        table.innerHTML = "";

        // (B2) GENERATE TABLE
        csv = csv.split("\r\n");
        for (let row of csv) {
            let tr = table.insertRow();
            for (let col of row.split(",")) {
                let td = tr.insertCell();
                td.innerHTML = col;
            }
        }
    });

index.html：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css" />
    <script defer src="main.js"></script>
    <title>CSV To HTML Table</title>
</head>

<body>
    <!-- GENERATE HTML TABLE HERE -->
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search here..."
        title="Type in a a number to search for.">
    <table id="data_table"></table>
</body>

</html>

上面的所有代码都很好地运作良好，但是我需要您帮助我，请：

  1. 阅读data.csv并将其加载到表标头中，因为 我想对其应用其他一些CSS样式。
  2. 仅在标题后仅读取接下来的100行并显示它们 进入桌子主体，以便对它们应用样式。
  3. 我只想显示前100行，因为data.csv文件很大 加载和显示它需要很多时间。但是我想 加载/将其读取到后台，虽然尚未完全阅读 输入类型，具有ID“ myintut”，即无形或禁用的输入类型 为了仅在完整的表格上搜索 加载。

我还尝试部分解决了应用（修改后的）解决方案的问题-header-html“>在这里，但根本无法正常工作。 （另外，如何在显示前100行后继续将数据加载到后台？）

function arrayToTable(tableData) {
    var table = $('<table id = "data_table"></table>');
    $(tableData).each(function (i, rowData) {
        if (i==0){
            var head = $('<thead class= "table_header"></thead>');
            var row = $('<tr id="header"></tr>');
            $(rowData).each(function (j, cellData) {
                row.append($('<th>'+cellData+'</th>'));
            });
            head.append(row);
            table.append(head);
        } else{
            var row = $('<tr class="table_data"></tr>');
            $(rowData).each(function (j, cellData) {
                row.append($('<td>'+cellData+'</td>'));
            });
            table.append(row);
        }
    });
    return table;
}

$.ajax({
    type: "GET",
    url: "data.csv",
    success: function (data) {
        $('#container').append(arrayToTable(Papa.parse(data).data));
    }
});

似乎许多人在寻找我在这里问的内容，但没有明确的解决方案，所以我认为这会帮助许多人。

先感谢您！

原文

I have on the local server the following files:

data.csv:

(It is a very huge .csv file with over 350.000 rows.)

Day,Hour,N1,N2,N3,N4,N5,N6,N7,N8,N9,N10,N11,N12,N13,N14,N15,N16,N17,N18,N19,N20
1996-03-18,15:00,4,9,10,16,21,22,23,26,27,34,35,41,42,48,62,66,68,73,76,78
1996-03-19,15:00,6,12,15,19,28,33,35,39,44,48,49,59,62,63,64,67,69,71,75,77
1996-03-21,15:00,2,4,6,7,15,16,17,19,20,26,28,45,48,52,54,69,72,73,75,77
1996-03-22,15:00,3,8,15,17,19,25,30,33,34,35,36,38,44,49,60,61,64,67,68,75
1996-03-25,15:00,2,10,11,14,18,22,26,27,29,30,42,44,45,55,60,61,66,67,75,79
1996-03-26,15:00,4,10,12,19,20,22,30,31,32,37,44,45,55,57,60,61,64,69,70,72
1996-03-28,15:00,1,4,9,11,12,13,15,26,32,35,39,40,49,53,62,63,72,73,77,78
1996-03-29,15:00,3,9,13,14,24,27,29,32,35,41,44,47,49,50,61,64,66,69,72,73
1996-04-01,15:00,2,4,6,9,12,14,20,21,25,35,39,43,44,45,48,50,52,61,69,72

...

main.js:

(It is loading the data.csv and display it into the html table from
index.html.)

// (A) GET HTML TABLE
//let table = document.getElementById("data_table");

// (B) AJAX FETCH CSV FILE
fetch("data.csv")
    .then((res) => { return res.text(); })
    .then((csv) => {
        // (B1) REMOVE OLD TABLE ROWS
        table.innerHTML = "";

        // (B2) GENERATE TABLE
        csv = csv.split("\r\n");
        for (let row of csv) {
            let tr = table.insertRow();
            for (let col of row.split(",")) {
                let td = tr.insertCell();
                td.innerHTML = col;
            }
        }
    });

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css" />
    <script defer src="main.js"></script>
    <title>CSV To HTML Table</title>
</head>

<body>
    <!-- GENERATE HTML TABLE HERE -->
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search here..."
        title="Type in a a number to search for.">
    <table id="data_table"></table>
</body>

</html>

All the code above is working very well but there is something I need you to help me with, please:

  1. Read first row of the data.csv and load it into table header because
    I want to apply some other css styles to it.
  2. Read only the next 100 rows just after the header and display them
    into the table body in order to apply styles to them too.
  3. I want to display only first 100 rows because data.csv file is huge
    and it takes a lot of time to load and display it. But I want to
    load/read it into background and while it is not fully read the
    input type with the id "myInput" to be invisible or disabled in
    order to be able to search on the full table only when it is fully
    loaded.

I tried also to partially solve the problem applying the (modified) solution found here but it is not working at all. (Also, how to continue to load data in background after displaying first 100 rows?)

function arrayToTable(tableData) {
    var table = $('<table id = "data_table"></table>');
    $(tableData).each(function (i, rowData) {
        if (i==0){
            var head = $('<thead class= "table_header"></thead>');
            var row = $('<tr id="header"></tr>');
            $(rowData).each(function (j, cellData) {
                row.append($('<th>'+cellData+'</th>'));
            });
            head.append(row);
            table.append(head);
        } else{
            var row = $('<tr class="table_data"></tr>');
            $(rowData).each(function (j, cellData) {
                row.append($('<td>'+cellData+'</td>'));
            });
            table.append(row);
        }
    });
    return table;
}

$.ajax({
    type: "GET",
    url: "data.csv",
    success: function (data) {
        $('#container').append(arrayToTable(Papa.parse(data).data));
    }
});

It seems many people is looking for what I'm asking here but there isn't any clear solution so I think this is gonna help many people.

Thank you in advance!

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。
列表为空，暂无数据

关于作者

波浪屿的海角声

暂无简介

文章
评论
27 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

李珊平

文章 0 评论 0

Quxin

文章 0 评论 0

范无咎

文章 0 评论 0

github_ZOJ2N8YxBm

文章 0 评论 0

若言

文章 0 评论 0

南…巷孤猫

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文