在 laravel 中使用 DataTable 和 Ajax答案

【问题标题】：Use DataTable and Ajax in laravel在 laravel 中使用 DataTable 和 Ajax
【发布时间】：2019-12-26 20:28:17
【问题描述】：

我正在学习将 DataTable 与 Ajax 一起使用。

我正在通过下一个函数获取我的数据，该函数正在从数据库中查询数据：

function loadTable() {
            $.getJSON('/admin/users3/qryUsers')
                .done(function (data) {
                    console.log('data', data);
                    // Clear tbody tag
                    $('tbody').empty();
                    // Loop over each item in the array
                    $.each(data, function (key, value) {
                        let tr = `<tr>
                               <td>${value.id}</td>
                               <td>${value.name}</td>
                               <td>${value.email}</td>
                               <td>${value.active}</td>
                               <td>${value.admin}</td>
                               <td data-id="${value.id}"
                                   data-name="${value.name}"
                                   data-email="${value.email}"
                                   data-active="${value.active}"
                                   data-admin="${value.admin}">
                                    <div class="btn-group btn-group-sm">
                                        <a href="#!" class="btn btn-outline-success btn-edit" data-toggle="tooltip" title="Edit ${value.name}">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <a href="#!" class="btn btn-outline-danger btn-delete" data-toggle="tooltip" title="Delete ${value.name}">
                                            <i class="fas fa-trash"></i>
                                        </a>
                                    </div>
                               </td>
                           </tr>`;
                        $('tbody').append(tr);
                    });
                })
                .fail(function (e) {
                    console.log('error', e);
                })
        }

使用此功能：

 $(document).ready(function () {
            $('#table_id').DataTable();
            loadTable();
        });

我可以将数据加载到表格中，但是当我单击标题以对所有数据进行排序时，所有数据都会在视觉上消失，与搜索字段相同。我知道我可能需要重新绘制表格或其他东西，但是如前所述，我是新手，似乎还不能开始，我希望有人能帮助我！

编辑：我现在尝试了这个：

$.getJSON('/admin/users3/qryUsers')
                .done(function (data) {
                    console.log('data', data);
                    $('#table_id').DataTable({
                        "ajax": data,
                        "columns": [
                            {"data": "id"},
                            {"data": "name"},
                            {"data": "email"},
                            {"data": "active"},
                            {"data": "admin"}
                        ]
                    });
                })
                .fail(function (e) {
                    console.log('error', e);
                });

并出现错误：DataTables 警告：table id=table_id - JSON 响应无效。我已经对此进行了调查并通过 jsonlint 检查了我的 json 响应，但它似乎是有效的

QryUsers 方法：

public function qryUsers()
    {
        $users = User::orderBy('name')
            ->get();
        return $users;
    }

【问题讨论】：

标签： jquery ajax datatables

【解决方案1】：

问题是您在初始化DataTable 之后直接通过添加tr 元素来操作表格。不推荐以这种方式使用 DataTables。

修复代码的快速方法是在初始化表格之前操作表格。比如去掉$('#table_id').DataTable()调用，放到done()函数中。

$.getJSON('/admin/users3/qryUsers')
    .done(function (data) {
        // Populate table

        // Initialize DataTable plug-in
        $('#table_id').DataTable();
     });

最好的方法是让 DataTables 处理 Ajax 调用，请参阅 this example 以获取代码和演示。

【讨论】：