Question

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

查看图片：

Bug Display

Searching datatable

这是显示器后面的代码。

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

您需要检查几件事。

确保每次键入过滤器文本并在其上输入时，“搜索”文本字段均能正常工作。我看到您的代码没有传递给服务器。（数据：{}此处。）
检查您是否从account_list.php ajax调用中接收到过滤数据。
尝试在account_list.php中检查您的查询。似乎您的搜索数据应使用“帐户名”列进行查询。喜欢。.ACOUNT_NAME喜欢'％filter％'

您需要检查成功块的结果。

成功：功能（res）<-此处。 “ res”

另外，

最好在成功框下面添加跟踪错误。我认为这种情况可能是结果错误或查询中发生意外过程。

示例：

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

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

Answer 2

您做错了什么，是您没有追加到表格中。您正在使用数据表。您想要做$("#dataTable").dataTable().rows.add(["col1","col2",..., "colLast"]).draw();，然后可以搜索表格。 DataTable不会搜索表中的行，而是使用自己的方法搜索添加到表中的行。

开奖很重要。如果您没有在末尾添加。draw()，则它实际上不会显示所做的更改。

$('#dataTable').dataTable().rows.add([res[i]['account_id'],
                            res[i]['bvcsi_control'],
                            res[i]['account_name'],
                            res[i]['date_inspection'],
                            res[i]['date_report'],
                            res[i]['act_useof_prop'],
                            res[i]['landmark'],
                            res[i]['reg_owner'],     
                            lst]).draw();

这假设您的表的ID为“表”

Answer 3

数据表非常强大-如果您使用它具有的功能，并且不要尝试构建自己的功能（这就是您试图做的事情.....）

您的HTML没问题（对于数据表，您不需要tbody中的“ id”）。

您的JS需要大量清理（并让数据表完成工作！）

$(document).ready(function(){
    var theTable = $("dataTable").dataTable({
        "ajax": {
            url: "../srtdash/php_functions/account_list.php"
            // this presumes you are returning a json list of info you want 
            // (since you see it in the first example, it looks like it is OK)
            // see https://datatables.net/examples/data_sources/ajax.html
        },
        responsive: true,  // if you want a responsive table
        "order": [0, 'desc'],  // make the order as you like (count starts at column 0!)
        "columns": [
            {data: 'account_id'},
            {data: "bvcsi_control"},
            {data: 'account_name'},
            {data: "date_inspection"},
            {data: 'date_report'},
            {data: 'act_useof_prop'},
            {data: 'landmark'},
            {data: 'reg_owner'},
            {data: 'status'}
        ],
        columnDefs: [
            {
                // here is where you do your 'button' stuff (or anything you want to change in the table....)
                // 'data' is the info of the column
                render: function (data, type, row) {
                    var lst;
                    if (data === 1 ){
                       lst = '<h4><a href="#" class="badge badge-primary">Pending</a></h4>';
                    }else if (data === 2 ){
                        lst = '<h4><a href="#" class="badge badge-secondary">For Approval</a></h4>';
                    }else if (data === 3 ) {
                         lst = '<h4><a href="#" class="badge badge-success">For CAD</a></h4>';
                    }else if (data === 4 ){
                         lst = '<h4><a href="#" class="badge badge-danger">For Appraisal</a></h4>';
                    }else if (data === 5 ){
                         lst = '<h4><a href="#" class="badge badge-info">Release</a></h4>';
                    }                        
                    return data;
                },
                targets: [8] // changes Status to a button
            }
        ]
    })
});

还有其他一些清除操作（例如，不要在“ lst”行中复制HTML），尽管这样做应该可以使您工作起来-并使用“应该”使用类似的数据表（利用其功能来执行为您工作！）

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

3 个答案: