Bug in load data with Ajax procedure ?

Bug in load data with Ajax procedure ?

lupomeolupomeo Posts: 6Questions: 2Answers: 0
edited January 2023 in Free community support

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • lupomeolupomeo Posts: 6Questions: 2Answers: 0

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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    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

  • lupomeolupomeo Posts: 6Questions: 2Answers: 0

    will check thx

Sign In or Register to comment.