Question

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

到目前为止这是我的代码（不介意杂乱，我会在主要功能到位后清理它。）

<!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>

Answer 1

您是否尝试将数据填充代码放在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
            }
        });
    }
});

根据Jquery，JS中解析的CSV文件，使用JSON数据填充表

1 个答案: