Предупреждение DataTables: таблица id = users_list - Неверный ответ JSON.Для получения дополнительной информации об этой ошибке см. http://datatables.net/tn/1

Question

Я получаю данные из таблицы пользователей, основываясь на активном-неактивном состоянии, после чего данные цикла foreach должны отображаться с использованием таблицы данных, но при этом появляется ошибка

Предупреждение DataTables: идентификатор таблицы = users_list - InvalidОтвет JSON

, поэтому мое требование

1) Show all data in the data table
2) per page 5 records
3) Default search box of a data table
4) Pagination of a data table

Ниже приведен мой код, но он не работает для меня. В раскрывающемся списке файла index.php и на основе вызова ajax события onchangeк методу users_list в контроллере ajax.

In index.php  file drop-down list with ajax call request



 <select class="custom-select" onchange="get_users(this.value)">
        <option value="active">Active</option>
        <option value="inactive">Inactive</option>
    </select>
<div class="show_data"></div>

    <script>
    function get_users(status){
    $.ajax({
    type:'POST',
    url:'<?php echo SITE_URL . 'ajax/users_list'; ?>',
    data:{ status:status},        
    success: function(data)
    {        
    $(".show_data").html(data);
    },
    error: function (jqXHR, textStatus, errorThrown)
    {
    alert('Failed');
    }
    });
    }

    </script>

В контроллере Ajax.php

function users_list(){
$status=$this->input->post('status');   //active  or inactive 
$data['users']=$this->db->where('status',$status)->get('users')->result();
$this->load->view('view_assets',$data); 
}

В файлах view_assets.php

<table id="display_userinfo">
    <thead>
        <tr class="bg-light">
            <th>user id</th>
            <th>user name</th>
            <th>Mobile no</th>
        </tr>
    </thead>
    <?php foreach ($users as $user) { ?>
        <tbody>
            <tr>
                <td><?= $user->id ?></td>
                <td><?= $user->name ?></td>
                <td><?= $user->mobile ?></td>
            </tr>
        <?php } ?>
    </tbody>
    <script>
        $('#display_userinfo').DataTable({
            "processing": true,
            "serverSide": true,
        });
    </script>

Answer 1

JavaScript

Вы установили для ServerSide значение true, когда вызываете DataTable().Но вы уже создали таблицу.Измените это:

    $('#display_userinfo').DataTable({
        "processing": true, //Optional, only useful for *large* tables
        //"serverSide": true, //REMOVE THIS
    });

Из документации:

По умолчанию DataTables работает в режиме обработки на стороне клиента, но может быть переключен в режим обработки на стороне сервера с помощью этой опции.Обработка на стороне сервера полезна при работе с большими наборами данных (обычно> 50 000 записей), поскольку она означает, что ядро ​​базы данных можно использовать для выполнения сортировки и вычислений - операций, для которых современные движки баз данных высоко оптимизированы, что позволяет использовать DataTablesс массивными наборами данных (миллионы строк).

Вы должны использовать ServerSide, только если планируете кормить DataTable() JSON.В противном случае вы можете просто запустить DataTable() без флага ServerSide, и он переведет ваш HTML-код в его формат.

Если вы перенастроили свой бэкэнд, вы все равно можете использовать ServerSide, но это может и не понадобиться.Вот пример для начала работы:

$('#display_userinfo').dataTable( {
  "serverSide": true, //Here it's necessary
  "ajax": {
     "url": '<?php echo SITE_URL . 'ajax/users_list'; ?>',
     "data": {}
   }
});

HTML

Вы также допустили небольшую ошибку разметки, которая может повлиять или не повлиять на DataTables,Измените следующее:

    <tbody> <!-- This needs to be BEFORE the foreach() loop -->
<?php foreach ($users as $user) { ?>
            <tr>
                <td><?= $user->id ?></td>
                <td><?= $user->name ?></td>
                <td><?= $user->mobile ?></td>
            </tr>
        <?php } ?>
    </tbody> <!-- Correctly placed *AFTER* the foreach() loop -->