显示 0 个条目数据表答案

【问题标题】：Showing 0 entries datatable显示 0 个条目数据表
【发布时间】：2018-01-02 13:06:12
【问题描述】：

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

【问题讨论】：

浏览器控制台中是否显示任何错误？

标签： javascript jquery datatables

【解决方案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 请求。

【讨论】：

我收到这些错误：无法读取未定义的属性“mData”
@Janjan，见TypeError: Cannot read property ‘mData’ of undefined，很可能是标题/正文中的列数不匹配，或者您缺少表格标题。
太棒了。太感谢了！我从 2 天开始一直在寻找这个解决方案，最后这个答案有帮助:)

【解决方案2】：

$.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();
    }
});

添加了一些额外的格式

【讨论】：