Получить данные из базы данных MySQL в Dataatable с помощью JQuery

Question

Я разработал базу данных MySQL и PHP-код. В коде php я использую jQuery (вызов ajax) для извлечения данных из базы данных. В файле HTML я напечатал только заголовок таблицы datatable. Остальные данные, которые я хочу получить из базы данных. код дается:

---

HTML-код:

<div class="container box">
     <div class="table-responsive">
            <div id="alert_message"></div>
            <table id="example" class="display">
               <thead>
                  <tr>
                     <th>Student ID</th>
                     <th>Student Name</th>
                     <th>Email ID</th>
                     <th>Mobile</th>
                     <th>Status</th>
                  </tr>
               </thead>
            </table>
         </div>
      </div>

---

КОД JQuery:

<script>
    $(document).ready(function() {
        $('#example').dataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "fetch.php",
                "type": "GET",
                "datatype": "json"
            }
        });
    });
</script>

---

fetch.php

<?php
$connect = mysqli_connect("localhost","root","","lib");
$sql = "SELECT StudentId, FullName, EmailId, MobileNumber, Status  FROM tblstudents";
$result = mysqli_query($connect,$sql);

$json_array = array();

while ($row = mysqli_fetch_assoc($result)) 
{
    $json_array[] = $row;
}

echo json_encode($json_array);
?>

---

Тем не менее, данные не распечатываются в базе данных. Какие изменения необходимы в jQuery?

Answer 1

В jQuery Datatables вы можете не только получать данные из вызова ajax. Вы можете управлять порядком страниц, а также поиском.

Прежде всего вы должны изменить свой JavaScript, как это.

$(document).ready(function() {
        $('#example').dataTable({
            "bProcessing": true,
            "serverSide": true,
            "ajax": {
                "url": "fetch.php",
                "type": "post"
            },
                error: function () {  // error handling code
                    $("#example").css("display", "none");
                }
        });
    });

Затем, как вы можете видеть в браузере Инструменты разработчика -> Сетевое нажатие, все параметры, которые нужно найти, отсортировать и упорядочить, будут переданы через вызов ajax.

Вы можете увидеть это с помощью print_r($_POST) на странице ajax (в вашем случае fetch.php) и просмотреть его на ajax, откликнувшись в браузере Инструменты разработчика -> Сетевое нажатие.

Вы можете собрать все это следующим образом,

    $order_by = $_POST['order']; // This array contains order information of clicked column
    $search = $_POST['search']['value']; // This array contains search value information datatable
    $start = $_POST['start']; // start limit of data
    $length = $_POST['length']; // end limit of data
    $order_type = $order_by[0]['dir'];
    if ($order_by[0]['column']==0){
        $order_column = "table_column_name_of_the_first_column_in_the_datatable";
    } elseif ($order_by[0]['column']==1){
        $order_column = "table_column_name_of_the_second_column_in_the_datatable";
    }

тогда вы можете построить запрос следующим образом,

if ($search!='' || $search!=NULL) {
    $str = "WHERE column_name_to_search LIKE '%$search%' OR column_name_to_search LIKE '%$search%' ";
} else {
    $str = "";
}
$data[][] = array(); 
$i = 0;
$sql = $connection->query("SELECT * FROM your_table $str ORDER BY $order_column $order_type LIMIT $start,$length");
while ($row_1 = $sql->fetch_assoc()){
    $data[$i] = array($row_1['column_1'],$row_1['column_2']);
    $i++;
}

затем, чтобы получить общее количество записей, вы можете сделать следующее,

$sql_2 = $connection->query("SELECT COUNT(*) AS all_count FROM your_table $str");
$row_2 = $sql_2->fetch_assoc();
$totalRecords = $row_2['all_count'];
if ($totalRecords==0){
    $data = array();
}

наконец, создайте выход JSON, который будет отправлен на вид спереди.

$json_data = array(
    "draw"            => intval( $_POST['draw'] ),
    "recordsTotal"    => intval( $totalRecords ),
    "recordsFiltered" => intval($totalRecords),
    "data"            => $data   // total data array
);
$json_data = json_encode($json_data);
echo $json_data;

Это будет работать.

Answer 2

Я знаю, что это действительно поздно, но я использовал тот же код, что и вы (спасибо за это, кстати!), И что заставило его работать для меня, так это просто добавление в код JQuery:

dataSrc = '' (после url = '...')

так что DataTables знает, что он загружает массив. Если сделать это, код работает нормально!