DataTables添加数据后调用ajax.reload()刷新时触发无效JSON响应错误的问题求助
DataTables添加数据后调用ajax.reload()刷新时触发无效JSON响应错误的问题求助
大家好,我在项目里用DataTables展示数据库返回的列表数据,现在遇到一个问题想请教下:
首先是页面中的表格HTML结构:
<div class="table-responsive mt-4" style="padding-top:50px;"> <table id="memberList" class="table table-striped"> <thead> <tr> <th>Employee Number</th> <th>Employee Name</th> <th>Designation</th> <th>Department</th> <th>Authorization</th> <th></th> </tr> </thead> </table> </div>
然后是初始化DataTables的脚本:
$('#memberList').DataTable({ processing: true, serverSide: true, filter: true, scrollY: '400px', orderMulti: false, ajax: { url: getMemberList, type: 'POST', datatype: 'json' }, columns: [ { data: "EmpNumber", name: "Employee Number" }, { data: "EmployeeName", name: "Employee Name" }, { data: "Dessignation", name: "Designation" }, { data: "Department", name: "Department" }, { data: "IsAuthorized", render: function (data, type, row) { return data ? '<span class="text-success">Allowed</span>' : '<span class="text-danger">Denied</span>'; }, name: "Authorization" }, { data: "EId", render: function (data, type, row) { return ` <div class="btn btn-danger delete-member" data-id="${data}"> Remove </div>`; }, orderable: false } ], language: { search: "Search:" } });
页面里还有一个添加按钮,用户通过下拉框选择数据后点击添加,数据会提交到后端控制器完成业务处理并存入数据库。在请求成功的回调函数中,我尝试刷新DataTables,代码如下:
if (response.success) { showSuccessToast("Employee added successfully"); // Refresh the DataTable $('#memberList').DataTable().ajax.reload(); $(ctl).prop("disabled", false).text(originalText); closePopup(); }
但这段代码并没有生效,反而触发了错误提示:
DataTables warning: table id=memberList - Invalid JSON response.
想请教下大家这个问题该怎么解决?
备注:内容来源于stack exchange,提问作者Dev Beginner
相关产品推荐
相关产品推荐

