javascript - 如何使用 JavaScript 在 HTML 表格中显示 MySQL 数据库条目？

Question

我已经成功在HTML数据表中显示了MySQL表，但是有一个错误导致显示不正确。

看图:

这是显示背后的代码。

JavaScript:

 $(document).ready(function(){
                loadAccountList();
        });

        function loadAccountList() {

            $.ajax({
                /*url: "../srtdash/php_functions/account_list.php",
                type: "POST", 
                dataType: "JSON",
                data: {}, //this is data you send to your server*/
                    type: 'POST',
                    url: '../srtdash/php_functions/account_list.php',
                    dataType: 'json',
                    data: {},
                    contentType: 'application/json; charset=utf-8',
                success: function(res)
                {   
                        for (var i = 0; i < res.length; i++) {

                                var lst;

                                if (res[i]['status'] == 1 ){
                                    lst = '<h4><a href="#" class="badge badge-primary">Pending</a></h4>';
                                }else if (res[i]['status'] == 2 ){
                                    lst = '<h4><a href="#" class="badge badge-secondary">For Approval</a></h4>';
                                }else if (res[i]['status'] == 3 ) {
                                    lst = '<h4><a href="#" class="badge badge-success">For CAD</a></h4>';
                                }else if (res[i]['status'] == 4 ){
                                    lst = '<h4><a href="#" class="badge badge-danger">For Appraisal</a></h4>';
                                }else if (res[i]['status'] == 5 ){
                                    lst = '<h4><a href="#" class="badge badge-info">Release</a></h4>';
                                }

                          $('#tableBody').append('<tr><td hidden>' + res[i]['account_id'] 
                            + '</td><td>' + res[i]['bvcsi_control'] 
                            + '</td><td>' + res[i]['account_name'] 
                            + '</td><td>' + res[i]['date_inspection'] 
                            + '</td><td>' + res[i]['date_report'] 
                            + '</td><td>' + res[i]['act_useof_prop'] 
                            + '</td><td>' + res[i]['landmark']
                            + '</td><td>' + res[i]['reg_owner']     
                            + '</td><td>' + lst
                            + '</td></tr>')
                        }
                }       
            });
    }

HTML:

                    <div class="data-tables">
                        <table id="dataTable" class="text-center" >
                            <thead class="bg-light text-capitalize">
                                <tr>
                                    <th hidden>User ID</th>
                                    <th>Control No.</th>
                                    <th>Account Name</th>
                                    <th>Date Inspection</th>
                                    <th>Date of Report</th>
                                    <th>Actual Use</th>
                                    <th>Landmark</th>
                                    <th>Registered Owner</th>
                                    <th>Status</th>
                                </tr>
                            </thead>
                            <tbody id="tableBody">
                            </tbody>
                        </table>
                    </div>

还有一个错误，当我使用数据表中的文本框进行搜索时，它没有过滤表格，它只指出 No data available in table

Answer 1

你需要检查几件事。

1. 确保您的搜索文本字段在您每次键入筛选文本并输入时都能正常工作。我看到你的代码没有传递给服务器。 (数据:此处为 {}。)

2. 检查您是否收到来自 account_list.php ajax 调用的过滤数据。

3. 尝试检查您在 account_list.php 中的查询。似乎您的搜索数据应该使用 Account Name 列进行查询。喜欢.. ACOUNT_NAME 喜欢'%filter%'

您需要在成功 block 上检查结果。

成功:function(res) <- 这里。 “资源”

此外，

最好在成功 block 下方添加用于跟踪错误。我假设这种情况可能是结果错误或查询中的某些意外过程。

例子:

error:function(e)
{  
              alert(e.responseText);  
}

其次，每次成功调用 ajax 时，您可能需要清除上面的“tableBody”表。否则，它将堆叠您搜索的先前数据。