javascript - 显示 0 条数据表

Question

我在数据表中遇到问题。为什么我得到一个“显示 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:我包含了所有库。

Answer 1

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

$.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 请求。