Javascript 如何在Ajax中调用Datatables draw（）方法？
我试图在Django应用程序中使用AJAX实现datatables draw（）方法。我已经实现了datatables和AJAX，它们工作得很好。但是，每当我创建一个新对象并调用draw（）方法，以便datatables可以刷新表并以正确的方式显示新创建的数据时，我都会面临很多挑战。如果我添加draw（）方法，除了刷新页面外，表根本不会被填充Javascript 如何在Ajax中调用Datatables draw（）方法？,javascript,django,ajax,datatables,Javascript,Django,Ajax,Datatables,我试图在Django应用程序中使用AJAX实现datatables draw（）方法。我已经实现了datatables和AJAX，它们工作得很好。但是，每当我创建一个新对象并调用draw（）方法，以便datatables可以刷新表并以正确的方式显示新创建的数据时，我都会面临很多挑战。如果我添加draw（）方法，除了刷新页面外，表根本不会被填充 main.js //datatables $(document).ready(function() { $('table').on('click'
main.js//datatables
$(document).ready(function() {
$('table').on('click', ".dropdownDatatableButton" ,function() {
$( this ).toggleClass( "active");
});
function csrfSafeMethod(method) {
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
};
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
}
});
var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
var table = $('#boardsTable').DataTable({
"autoWidth": false,
"info": false,
"lengthChange": false,
"processing": true,
"hover": true,
"serverMethod": 'post',
"searching": true,
"ajax": "/boards/api/data/?format=datatables",
"pagingType": "full_numbers",
"order": [[ 0, "asc" ]],
language: {
search: "",
"zeroRecords": '<img class=' + '"dataTables-error-image"' + 'src=' + "'/static/media/images/empty-search.jpg'"
+ '/>' + '<p class=' + '"dataTables-error-text"' + '>'
+ 'No boards were found that match your search' + '<p/>',
"loadingRecords": '<div class="spinner-border m-5" role="status">'
+ '<span class="sr-only d-block">Loading...</span> </div>'
+ '<p class="d-block text-center mt-3">Pulling board information...' + '</p>',
"processing": '<p class="d-block text-center datatables-processing-text">Please wait...' + '</p>',
"emptyTable": '<img class=' + '"dataTables-error-image"' + 'src=' + "'/static/media/images/new.jpg'"
+ '/>' + '<p class=' + '"dataTables-error-text font-weight-bold"' + '>'
+ 'No boards to show right now' + '<p/>'
+ '<p class=' + '"dataTables-empty-table-description"' + '>'
+ 'When you start working on recruitment campaigns, we’ll list all your boards here.'
+ '<p/>'
+ '<a class="dataTables-error-create-btn show-only-on-mobile" data-bs-toggle="modal"'
+ 'data-bs-target="#createBoardModal" data-bs-backdrop="static"'
+ 'data-bs-keyboard="false">' + 'Create a board' + '<a/>',
},
initComplete : function() {
$("#boardsTable_filter").detach().appendTo('.filter-form');
},
"drawCallback": function(settings) {
var pagination = $(this).closest('.dataTables_wrapper').find('.dataTables_paginate');
pagination.toggle(this.api().page.info().pages > 1);
},
"columns": [
{data: null,
render: function ( data, type, row ) {
// show the board avatar and make merge it with `data: name`
return '<a class="datatable-board-link" href="' + data.url.toLowerCase() + '/manage' + '">'
+ '<img class="datatable-board-link-img" ' + 'src="' + data.avatar + '" ' + 'width="30px" '
+ 'height="30px" ' + 'alt="board avatar" />' + data.name + '</a>' ;
}
},
{data: null,
render: function ( data, type, row, meta ) {
// show the URL which are accessible to candidates
return '<a class="new-tab-board-link" href="' + data.lead.username + '/'
+ data.url + '" target="_blank">' + '/' + data.url
+ '<span class="material-icons">open_in_new</span>' + '</a>';
}
},
{ data: "lead",
render: function ( data, type, row, meta ) {
// show the lead recruiter avatar and combine the first and last names into a single table field
return '<a class="datatable-profile-link"' + 'href="'
+ 'http://127.0.0.1:8080/people/teams/' + data.id + '/' + data.username.toLowerCase() +'"'
+ 'target="_blank"' + '>' + '<img class="datatable-profile-link-img" ' + 'src="'+ data.avatar
+ '" ' + 'width="30px" ' + 'height="30px" ' + 'alt="' + data.name + ' ' + "'s avatar" + '"'
+ '/>' + data.name + '</a>';
},
},
{ data: null,
render: function ( data, type, row, meta ) {
return '<div class="dropdown datatables-dropdown" id="datatablesDropdown">'
+ '<span class="material-icons btn dropdownDatatableButton" id="dropdownDatatableButton"'
+ 'type="button"' + 'data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">'
+ 'more_horiz</span>'
+ '<div class="dropdown-menu dropdown-menu-right datatables-dropdown-inner"'
+ ' aria-labelledby="dropdownDatatableButton">'
+ '<ul>'
+ '<li><a href="' + data.url.toLowerCase() + '/settings' + '">Board settings</a></li>'
+ '<li><a class="btn btn-link btn-sm text-left">Delete</a></li>'
+ '</ul>'
+ '</div>'
+ '</div>';
},
},
],
"columnDefs": [
{"width": "10%", "targets": 3, "orderable": false},
],
});
table.columns().iterator('column', function (ctx, idx) {
$(table.column(idx).header()).append('<span class="sort-icon"/>');
});
// call the AJAX post method
$("#createBoardViaModalForm").on('submit', function (e) {
var spinner = $('#loader');
for ( instance in CKEDITOR.instances ) {
CKEDITOR.instances[instance].updateElement();
}
e.preventDefault();
spinner.show();
var serializedData = $(this).serialize();
$.ajax({
type: 'POST',
url: "post/ajax/board/",
data: serializedData,
success: function (data) {
if($('input[type="checkbox"]').prop("checked") == true){
//some codes
...
//take some serialised data and populate the table
// THIS IS WHERE THE ISSUE STARTS
var data = JSON.parse(data["data"]);
var fields = data[0]["fields"];
$("#boardsTable tbody").prepend(
`<tr>
<td>${fields["name"]||""}</td>
<td>${fields["url"]||""}</td>
<td>${fields["lead"]||""}</td>
</tr>`
);
// invoke datables draw() method to refresh the table
table.draw();
setTimeout(function(){
spinner.hide();
}, 1000);
console.log("Checkbox is checked. Modal will not be closed");
}
else if($('input[type="checkbox"]').prop("checked") == false){
// some codes
...
table.draw();
// more codes
}
},
error: function (jqXHR, textStatus, errorText) {
let data = jqXHR.responseJSON;
// more codes
console.log('There are some errors on the submitted form. Check the data errors array')
console.log(data)
}
})
});
//clear up the error logs when a user enters a value in the highlighted input field
});
//数据表
$（文档）.ready（函数（）{
$（'table'）。在（'click'，.dropdownDatatableButton'，函数（）上{
$（此）.toggleClass（“活动”）；
});
函数csrfSafeMethod（方法）{
返回（/^（获取|头|选项|跟踪）$/.test（方法））；
};
$.ajaxSetup({
发送前：功能（xhr、设置）{
如果（！csrfSafeMethod（settings.type）&&！this.crossDomain）{
setRequestHeader（“X-CSRFToken”，CSRFToken）；
}
}
});
var csrftoken=jQuery（“[name=csrfmiddlewaretoken]”）。val（）；
变量表=$（'#boardsTable'）。数据表({
“自动宽度”：false，
“信息”：错误，
“长度变化”：错误，
“处理”：对，
“悬停”：没错，
“服务器方法”：“post”，
“搜索”：没错，
“ajax”：“/boards/api/data/？format=datatables”，
“pagingType”：“完整编号”，
“订单”：[[0，“asc”]]，
语言：{
搜索：“，
“zeroRecords”：“+””
+'未找到与您的搜索“+”
匹配的板，
“加载记录”：“”
+“正在加载…”
+“拉板信息…”+“
”，
“正在处理”：“请稍候…”+“
”，
“emptyTable”：“+””
+“现在没有要显示的板”+“
”
+“”
+“当你开始进行招聘活动时，我们会在这里列出你所有的董事会。”
+“
”
+ '' ;
}
},
{数据：空，
呈现：函数（数据、类型、行、元）{
//显示候选人可以访问的URL
返回“”；
}
},
{数据：“领先”，
呈现：函数（数据、类型、行、元）{
//显示招聘负责人头像，并将名字和姓氏合并到一个表字段中
返回“”；
},
},
{数据：空，
呈现：函数（数据、类型、行、元）{
返回“”
+ ''
+“更多水平”
+ ''
+“”
+“”
+“- 删除
”
+“
”
+ ''
+ '';
},
},
],
“columnDefs”：[
{“宽度”：“10%”，“目标”：3，“可订购”：false}，
],
});
table.columns（）.iterator（'column'，function（ctx，idx）{
$（table.column（idx.header（））.append（“”）；
});
//调用AJAX post方法
$（“#createBoardViaModalForm”）。关于（'submit'，函数（e）{
变量微调器=$（“#加载器”）；
例如（在CKEDITOR.instances中的实例）{
CKEDITOR.instances[instance].updateElement（）；
}
e、 预防默认值（）；
spinner.show（）；
var serializedData=$（this）.serialize（）；
$.ajax({
键入：“POST”，
url:“post/ajax/board/”，
数据：序列化数据，
成功：功能（数据）{
if（$（'input[type=“checkbox”]'）.prop（“checked”）==true）{
//一些代码
...
//获取一些序列化数据并填充表格
//这就是问题的起点
var data=JSON.parse（data[“data”]）；
变量字段=数据[0][“字段”]；
$（“#boardsTable tbody”）。前缀(
`
${fields[“name”]| |“”}
${fields[“url”]| |”“}
${fields[“lead”]| |“”}
`
);
//调用datablesdraw（）方法刷新表
table.draw（）；
setTimeout（函数（）{
spinner.hide（）；
}, 1000);
console.log（“选中复选框。模式将不会关闭”）；
}
else if（$（'input[type=“checkbox”]”）。prop（“checked”）==false）{
//一些代码
...
table.draw（）；
//更多代码
}
},
错误：函数（jqXHR、textStatus、errorText）{
设data=jqXHR.responseJSON；
//更多代码
console.log（'提交的表单上有一些错误。请检查数据错误数组'）
console.log（数据）
}
})
});
//当用户在突出显示的输入字段中输入值时，清除错误日志
});
数据表重新加载APItable = $("#boardsTable").DataTable().ajax.reload();
在AJAX成功函数中，您可以这样绘制：
success: function(data) {
console.log(data);
if (data.d != null && data.d != undefined && data.d.results.length > 0) {
var table = $('#boardsTable').DataTable();
table.rows.add(data.d.results).draw();
}
}