Javascript 对DataTable使用laravel查询

我尝试通过以下查询使用来自数据库的数据初始化DataTable：

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

javascript:

    function 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检查F12->network中的json响应时，它说这是有效的json，所以我真的不知道我在这里做错了什么

这是我以前尝试过的，但是当我添加、删除或更新用户时，在每次删除、添加或更新函数之后重新加载表时会出现问题。它只给了我所有的用户，其中应该给10个分页，当我对他们进行排序时，它似乎仍然使用旧数据

$.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 = '';
                        if (value.name === "Amber Akkermans") {
                            tr = `<tr>
                           <td>${value.id}</td>
                           <td>${value.name}</td>
                           <td>${value.email}</td>
                           <td>${value.active}</td>
                           <td>${value.admin}</td>
                           <td>
                           <form action="/admin/users3/${value.id}" method="post" class="deleteForm">
@method('delete')
                            @csrf
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-outline-success btn-edit"
                                        data-toggle="tooltip"
                                        data-user="${value.name}"
                            data-id="${value.id}"
                            data-email="${value.email}"
                            data-active="${value.active}"
                            data-admin="${value.admin}"
                            title="Edit ${value.name}" disabled>
                        <i class="fas fa-edit"></i>
                    </button>
                    <button type="button" class="btn btn-outline-danger btn-delete"
                            data-toggle="tooltip"
                            data-user="${value.name}"
                            data-id="${value.id}"
                            title="Delete ${value.name}" disabled>
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </div>
                </form>
        </td>
           </tr>`;
                        } else {
                            tr = `<tr>
               <td>${value.id}</td>
               <td>${value.name}</td>
               <td>${value.email}</td>
               <td>${value.active}</td>
               <td>${value.admin}</td>
               <td>
               <form action="/admin/users3/${value.id}" method="post" class="deleteForm">
@method('delete')
                            @csrf
                            <div class="btn-group btn-group-sm">
                                <button type="button" class="btn btn-outline-success btn-edit"
                                        data-toggle="tooltip"
                                        data-user="${value.name}"
                            data-id="${value.id}"
                            data-email="${value.email}"
                            data-active="${value.active}"
                            data-admin="${value.admin}"
                            title="Edit ${value.name}">
                        <i class="fas fa-edit"></i>
                    </button>
                    <button type="button" class="btn btn-outline-danger btn-delete"
                            data-toggle="tooltip"
                            data-user="${value.name}"
                            data-id="${value.id}"
                            title="Delete ${value.name}">
                        <i class="fas fa-trash-alt"></i>
                    </button>
                </div>
                </form>
        </td>
           </tr>`;
                        }
                        $('tbody').append(tr);
                    });
                    $('#table_id').DataTable();
                })
                .fail(function (e) {
                    console.log('error', e);
                })
        }

$.getJSON（'/admin/users3/qryUsers'））
.完成（功能（数据）{
console.log（'data'，data）；
//清除车身标签
$（'tbody'）.empty（）；
//循环数组中的每个项
$。每个（数据、函数（键、值）{
让tr=''；
如果（value.name==“琥珀色阿克曼”）{
tr=`
${value.id}
${value.name}
${value.email}
${value.active}
${value.admin}
@方法（'delete'）
@csrf
`;
}否则{
tr=`
${value.id}
${value.name}
${value.email}
${value.active}
${value.admin}
@方法（'delete'）
@csrf
`;
}
$（'tbody'）。追加（tr）；
});
$（'#table_id'）。DataTable（）；
})
.失败（功能（e）{
console.log（'error'，e）；
})
}

---

感谢您的帮助

以json格式返回信息。 将qryUsers函数更改为：

public function qryUsers() { $users = User::orderBy('name') ->get(); return response()->json($users); } 公共职能部门 { $users=User:：orderBy（'name'） ->get（）； return response（）->json（$users）； }

---

Return response（）-json（$var）仍然给出相同的错误，我是否也必须更改我的loadtable函数中的某些内容？显示您得到的响应恐怕我已经修复了它，我稍微调整了我的datatable语法，并使用“/admin/users3/qryUsers”作为url:$（“#table_id”）。datatable（{ajax:{url:'/admin/users3/qryUsers'，dataSrc:'}，列：[{data:'id'}，{data:'name'}，{data:'email'}，{data:'active'}，{data:'admin'}，