Javascript 显示0个数据表条目

我在datatable中遇到问题。为什么我得到了一个显示0到0个条目，也不能搜索，它总是显示没有可用数据和分页被禁用。我该怎么办

这是我的密码：

//Show Products Table
function show_products() {
    var action = "Show Products";
    $.ajax ({
        type: 'POST',
        url: '../admin/class.php',
        data: {action: action},
        success: function(data) {
            //if success it will display the data
            $('#show_products').html(data);
        }
    });
}

//class.php(data)
if(isset($_POST['action']) && !empty($_POST['action'])) {
    $action = $_POST['action'];
    switch($action) {
        case 'Show Products': 
            //call the function show_products();
            show_products();
        break;
    }
}

//Function to fetch the all products
function show_products() {
    GLOBAL $db_conn;
    $search_query="SELECT p.product_id as productID, p.*, pe.* FROM tblproduct p JOIN (SELECT p.product_id, MIN(pe.product_extension_id) AS product_extension_id FROM tblproduct p LEFT JOIN tblproduct_extension pe ON pe.product_id = p.product_id GROUP BY product_id ORDER BY product_id) product_unique LEFT JOIN tblproduct_extension pe ON pe.product_extension_id = product_unique.product_extension_id WHERE p.product_id =product_unique.product_id"; 
    $query = mysqli_query($db_conn, $search_query);

    while($row = mysqli_fetch_array($query)) {
        $status = ($row['product_stocks'] == 0) ? '<label class="label label-danger">Out of stocks</label>' : '<label class="label label-success">In stocks</label>';
        ?>  
            <tr>
                <td><?=$row['product_name']?></td> /*fetch product_name*/
                <td><?=$row['product_brand']?></td> /*fetch product_brand*/
                <td><?=$row['category_name']?></td> /*fetch category_name*/
                <td>&#8369;<?=number_format($row['product_price'], 2)?></td> /*product_price*/
                <td><?=$row['product_size']?></td> /*fetch product_size*/
                <td><?=$row['product_stocks']?></td> /*fetch product_stocks*/
                <td><?=$status?></td> /*display status if 0 stocks "outofstock"*/
            </tr>
        <?php
    }
}

//Script of datatable
$(document).ready(function(){
    //get the id of table
    $('#datatable1').DataTable();
});

截图：

---

PS：我包括了所有的库。

只有在从服务器检索数据后才初始化表

$.ajax ({
    type: 'POST',
    url: '../admin/class.php',
    data: {action: action},
    success: function(data) {
        // If table is initialized
        if ($.fn.DataTable.isDataTable('#datatable1')){
           // Destroy existing table
           $('#datatable1').DataTable().destroy();
        );

        //if success it will display the data
        $('#show_products').html(data);

        // Initialize the table
        $('#datatable1').DataTable();
    }
});

---

如果您将多次发出Ajax请求。

仅在从服务器检索数据后初始化表

$.ajax ({
    type: 'POST',
    url: '../admin/class.php',
    data: {action: action},
    success: function(data) {
        // If table is initialized
        if ($.fn.DataTable.isDataTable('#datatable1')){
           // Destroy existing table
           $('#datatable1').DataTable().destroy();
        );

        //if success it will display the data
        $('#show_products').html(data);

        // Initialize the table
        $('#datatable1').DataTable();
    }
});

---

如果您将多次发出Ajax请求。

浏览器控制台中是否显示任何错误？浏览器控制台中是否显示任何错误？我收到了这些错误：无法读取的属性“mData”undefined@Janjan，请参阅，标题/正文中最有可能的列数不匹配，或者缺少表标题。太棒了。非常感谢你！我从2天开始搜索这个解决方案，最后这个答案起了作用：我遇到了以下错误：无法读取的属性'mData'undefined@Janjan，请参阅，标题/正文中最有可能的列数不匹配，或者缺少表标题。太棒了。非常感谢你！我从两天开始寻找这个解决方案，最后这个答案帮助了我：