Bug in load data with Ajax procedure ?

lupomeo

When i load the data form a database to a dataTable with simply php code in index.php all works fine.
When i load the data using Ajax method to refresh only the dataTable content all the data are loaded but something wrong happen in dataTable. It reports 0 entry also if there are more than 20 entries, the pages are wrong and often disappear the 'search' input.

This is the example:

1) daTa table inserting data in index.php without Ajax procedure (working ok):

include_once "config_db.php";
$con = connection();
$query = "SELECT * FROM `tipologie`";
$result = mysqli_query($con, $query);
$table = '';
if(mysqli_num_rows($result)){
    while($row = mysqli_fetch_assoc($result)){
        $table .= '<tr>';
        $table .= '<td>' . $row['descrizione'] . '</td>';
        $table .= '<td>' . $row['ore'] . '</td>';
        $table .= '<td>' . $row['validita'] . '</td>';
        $table .= "<td style='text-align:center'><a data-id='" . $row['id'] . "' data-toggle='modal' data-target='#editModal' href='' id='update' class='edit'>
        <i class='fa fa-edit'></i></a>  <a data-id='" . $row['id'] . "' class='delete' id='delete' href='' data-toggle='modal' data-target='#deleteModal'><i class='fa fa-trash'></i></a> </td>";
        $table .= '</tr>';
    }    
    echo($table);
}

1) daTa table inserting data in index.php with Ajax procedure (not ok):

javascript:

// loading data function
function loadData() {
    $.ajax({
        url: 'bend/read.php',
        method: 'GET',
        success: function (responce) {
            responce = $.parseJSON(responce);
            if (responce.status == 'success') {
                $('#dataTable').html(responce.table);
            }
        }
    });
}

php:

include_once "../config_db.php";
// getting all data
include_once "database/db.php";
// getting all data
function view_data(){
    $con = connection();
    $query = "SELECT * FROM `tipologie`";
    $result = mysqli_query($con, $query);
    if(mysqli_num_rows($result)){
        while($row = mysqli_fetch_assoc($result)){
        $table .= '<tr>';
        $table .= '<td>' . $row['descrizione'] . '</td>';
        $table .= '<td>' . $row['ore'] . '</td>';
        $table .= '<td>' . $row['validita'] . '</td>';
        $table .= "<td style='text-align:center'><a data-id='" . $row['id'] . "' data-toggle='modal' data-target='#editModal' href='' id='update' class='edit'>
        <i class='fa fa-edit'></i></a>  <a data-id='" . $row['id'] . "' class='delete' id='delete' href='' data-toggle='modal' data-target='#deleteModal'><i class='fa fa-trash'></i></a> </td>";
        $table .= '</tr>';
        }    
        echo json_encode(['status'=>'success', 'table' => $table]);
    } else {
        $table .= '<tr colspan="8"';
        $table .= '<td>NO DATA!</td>';
        echo json_encode(['status' => 'success', 'table' => $table]);
    }
    $table .= '</tbody>';
}

Can anyone confirm the bug or suggest another way to load data with Ajax procedure without the issue ?

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Your code doesn't show any Datatable code. Assuming you are using Datatables you will need to tell Datatables about the changes. One option might be to use destroy() before reloading the table in the ajax success function. Reload the table then reinitialize. Something like this:

        success: function (responce) {
            responce = $.parseJSON(responce);
            if (responce.status == 'success') {
                $('#dataTable').DataTable().destroy();
                $('#dataTable').html(responce.table);
                $('#dataTable').DataTable({
                // initialization options
                });
            }
        }

Kevin

lupomeo

Hi Kevin and thanks for the reply, but the issue is present also in the first data loading.

kthorngren

Datatables doesn't know about direct HTML changes to the table. Since you are directly building the HTML table in the DOM you need to make sure to initialize Datatables after this is complete. If the "first data loading" happens while the page is being built then likely you will need to initialize Datatables in $(document).ready(). Its hard to say specifically without seeing your code flow.

Kevin

lupomeo

will check thx