CODEWITHSUNDEEP
javascriptjquerydatatables
Jhon Th
Jhon Th

Reputation: 15

Showing 0 entries datatable

I'm having a problem in datatable. Why I got a "Showing 0 to 0 of 0 entries", also can't search, it always show "no data available" and the pagination are disabled. What should I do?

Here's my code:

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

Screenshot:

datatable

PS: I included all the libraries.

Upvotes: 0

Views: 3844

Answers (2)

طارق الجعبري
طارق الجعبري

Reputation: 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();
    }
});

Added some additional formatting

Upvotes: 0

Gyrocode.com
Gyrocode.com

Reputation: 58880

Initialize your table only after you retrieve the data from the server.

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

If you will be making Ajax request multiple times.

Upvotes: 5

Related Questions