jquery - 如何将mysql数据加载到 Electron 应用程序中的jquery数据表中

Question

我使用带有 MySQL 数据库和 jquery datatable 插件的本地主机服务器制作了一个 Electron 应用程序。如何将 MySQL 数据库中的数据加载到 datatable 中？

我已经能够在控制台中打印数据库中的数据，但我不知道如何使用我拥有的数据填充数据表

index.html表格

<section role="main" id="main">
        <div class="with-padding">
            <table class="table responsive-table" id="sorting-advanced">

                <thead>
                    <tr>
                        <th scope="col"><input type="checkbox" name="check-all" id="check-all" value="1"></th>
                        <th scope="col">Text</th>
                        <th scope="col" width="15%" class="align-center hide-on-mobile">Date</th>
                        <th scope="col" width="15%" class="align-center hide-on-mobile-portrait">Status</th>
                        <th scope="col" width="15%" class="hide-on-tablet">Tags</th>
                        <th scope="col" width="60" class="align-center">Actions</th>
                    </tr>
                </thead>

                <tfoot>
                    <tr>
                        <td colspan="6">
                            6 entries found
                        </td>
                    </tr>
                </tfoot>

                <tbody>


                    <tr>
                        <th scope="row" class="checkbox-cell"><input type="checkbox" name="checked[]" id="check-1" value="1"></th>
                        <td id="name"></td>
                        <td id="date"></td>
                        <td id="status">Enabled</td>
                        <td><small class="tag">User</small> <small class="tag">Client</small> <small class="tag green-bg">Valid</small></td>
                        <td class="low-padding align-center"><a href="#" class="button compact icon-gear">Edit</a></td>
                    </tr>

                </tbody>

            </table>
        </div>

    </section>

数据表脚本

  <script>
        var table = $('#sorting-advanced');
        table.dataTable({
            'aoColumnDefs': [{
                'bSortable': false,
                'aTargets': [0, 5]
            }],
            'sPaginationType': 'full_numbers',
            'sDom': '<"dataTables_header"lfr>t<"dataTables_footer"ip>',
            'fnInitComplete': function(oSettings) {
                // Style length select
                table.closest('.dataTables_wrapper').find('.dataTables_length select').addClass('select blue-gradient glossy').styleSelect();
                tableStyled = true;
            }
        });
    </script>

预加载.js

var con = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database: "mydb"
});

con.connect(function(err) {
    if (err) throw err;
    con.query("SELECT * FROM customers", function(err, result, fields) {
        if (err) throw err;
        let name = [this is what am getting no][1]document.getElementById("name");
        let date = document.getElementById("date");
        let status = document.getElementById("status");

        console.log(result);


        for (var i = 0; i < result.length; i++) {
            name.innerHTML += result[i].name + "<br/>";
            date.innerHTML += result[i].address + "<br/>";
            status.innerHTML += "enable" + "<br/>";
        }
    });
});

我想将数据库中的所有数据加载到数据表

screenshot of what I'm getting now

screenshot of what I want to achieve

Answer 1

最后我找到了如何实现这个结果，而且效果很好

html代码

  <table id="datatable" class="table table-striped ">
                            <thead>
                                <tr>
                                    <th>Room Number</th>
                                    <th>Name</th>
                                    <th>Reg Number</th>
                                    <th>Program</th>
                                    <!-- <th>Img</th> -->
                                </tr>
                            </thead>
                            <tbody id="tbdy">


                            </tbody>
                            <!-- 
                            <tfoot>
                                <tr>
                                    <th>Name</th>
                                    <th>Position</th>
                                    <th>Office</th>
                                    <th>Age</th>
                                    <th class="disabled-sorting text-right">Actions</th>
                                </tr>
                            </tfoot> -->
                        </table>

脚本

 <!--  DataTables.net Plugin, full documentation here: https://datatables.net/    -->
        <script src="assets/js/plugins/jquery.dataTables.min.js"></script>
 <script>
            $(document).ready(function() {
                $('#datatable').DataTable({
                    "pagingType": "full_numbers",
                    "lengthMenu": [
                        [5, 25, 50, -1],
                        [5, 25, 50, "All"]
                    ],
                    responsive: false,
                    language: {
                        search: "_INPUT_",
                        searchPlaceholder: "Search records",
                    }

                });

                var table = $('#datatable').DataTable();

                // Edit record
                table.on('click', '.edit', function() {
                    $tr = $(this).closest('tr');

                    var data = table.row($tr).data();
                    alert('You press on Row: ' + data[0] + ' ' + data[1] + ' ' + data[2] + '\'s row.');
                });

                // Delete a record
                table.on('click', '.remove', function(e) {
                    $tr = $(this).closest('tr');
                    table.row($tr).remove().draw();
                    e.preventDefault();
                });

                //Like record
                table.on('click', '.like', function() {
                    alert('You clicked on Like button');
                });
            });
        </script>

渲染器脚本

var mysql = require('mysql')
var con = mysql.createConnection({
    host: "localhost",
    user: "root",
    password: "",
    database: "mydb"
});
con.connect(function(err) {
    if (err) throw err;
    con.query('SELECT * FROM customers', function(err, data) { 
        if (err) throw err;
        console.log(data.length)
        var tbdy = document.getElementById('tbdy');
        for (var i = 0; i < data.length; i++) {
            var tr = document.createElement('tr');
            var td = document.createElement('td');
            var td2 = document.createElement('td');
            var td3 = document.createElement('td');
            var td4 = document.createElement('td');
            td.appendChild(document.createTextNode(data[i].id));
            td2.appendChild(document.createTextNode(data[i].name));
            td3.appendChild(document.createTextNode(data[i].address));
            td4.appendChild(document.createTextNode(data[i].img));
            tr.appendChild(td);
            tr.appendChild(td2);
            tr.appendChild(td3);
            tr.appendChild(td4);
            tbdy.appendChild(tr);
        }
    });
});