3

我整天都在尝试动态填充表格。该应用程序的目的是加载 CSV 文件并使用 Papaparse（出色的 CSV 到 JSON 框架）将其解析为 JSON，然后使用 DynaTable.js 使用此 JSON 数据填充表。我可能对自己的代码视而不见，非常感谢有关如何执行此操作的一些输入。:)

到目前为止，这是我的代码（不要介意混乱，我将在 main 函数到位后清理它）。

<!DOCTYPE html>
<html>
    <head>
        <title>CSV Parser</title> 
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, maximum-scale=1.0">
        <meta name="theme-color" content="#ffffff">

        <link rel="stylesheet" href="styles/bootstrap.min.css">
        <link rel="stylesheet" href="styles/filedrop.css">

        <script src="scripts/jquery-2.1.4.min.js"></script>
        <script src="scripts/bootstrap.min.js"></script>
        <script src="scripts/papaparse.min.js"></script>
        <script src="scripts/jquery.dynatable.js"></script>
        <script>
            var data;

            function handleFileSelect(evt) {
                var file = evt.target.files[0];

                Papa.parse(file, {
                    header: true,
                    dynamicTyping: true,
                    complete: function (results) {
                        data = results;
                        localStorage.setItem('dataStuff', JSON.stringify(data));
                    }
                });
            }

            $(document).ready(function () {
                $("#csv-file").change(handleFileSelect);
            });
        </script>
    </head>
    <body>
        <main>
            <header>
                <div class="jumbotron">
                    <div class="container">
                        <p>CSV Parser</p>
                    </div>
                </div>
            </header>
            <h1>Load CSV-file</h1>
            <input type="file" id="csv-file" name="files" />

            <table id="my-table">
                <thead>
                    <tr>
                        <th>Phone Number</th>
                        <th>Email Address</th>
                        <th>Binding End Date</th>
                        <th>Terminal Vendor</th>
                        <th>Terminal Billeba</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>

            <script>
                $.getJSON('dataStuff', function (response) {
                    $('#my-table').dynatable({
                        dataset: {
                            records: response
                        },
                    });
                });
            </script>
        </main>
    </body>
    <footer>
    </footer>
</html>
4

1 回答 1

0

您是否尝试过将数据填充代码放在 的complete回调上Papa.parse？像这样：

Papa.parse(file, {
    header: true,
    dynamicTyping: true,
    complete: function (results) {
        data = results;
        localStorage.setItem('dataStuff', JSON.stringify(data));

        $('#my-table').dynatable({
            dataset: {
                records: results
            }
        });
    }
});
于 2015-11-03T02:10:25.137 回答