如何根据js请求的响应在页面中生成动态行?(Django模板/ HTML)

Question

是否可以在HTML表中附加带有数据的行作为JavaScript请求的响应而不进行页面回发?

Django: 3.1.7

我想为代码编写一个单独的HTML文件(就像我们可以使用include标记的文件)，所以我不必在HTML字符串中附加整个表的HTML。

现在我通过转换成字符串连接来附加HTML。

注意:需要一个没有页面回发的解决方案

function GetCollection(myId) {
var Urlgetallcom = "/sc/GetCollection/" + myId ;
// alert(Urlgetallcom);
$.ajax({
url: Urlgetallcom, // the endpoint
type: "GET", // http method
data: {
Id: myId
},
// handle a successful response
success: function (json1) {
var groups= JSON.parse(json.Groups);
var collection= JSON.parse(json.ftmJSON);
$('#allTeammates').append(
`<thead>
<tr>
<th style="width: 26%;">Name</th>
<th style="width: 30%;">Email</th>
<th style="width: 12%;">Status</th>
<th style="width: 20%;">Role</th>
<th style="width: 20%;">Permission</th>
<th style="width: 12%;"></th>
</tr>
</thead>`
)
for (var i = 0; i < collection.length; i++) {
var isActive = collection[i].isActive ? 'checked=checked' : ''
var mystring1 = 
'<tr id='+ collection[i].ftId +'>' +
'<td style="width: 26%;">' +
collection[i].name +
'</td>' +
'<td style="width: 30%;">' +
collection[i].email +
'</td>' +
'<td style="width: 12%;">' +
collection[i].status +
'</td>' +
'<td style="width: 20%;">' +
'<span class="name" value="'+collection[i].gId+'" id="lblGroups' + collection[i].fId + '">' + collection[i].gName + '</span>' +
'<div id="divGroups'+ collection[i].fId+ '"  style="display:none">' +
'<select id="dropdownList'+ collection[i].ftId + '" class="lstG" style="height: 20px;">';
for (var j = 0; j < groups.length; j++) {
var sld = collection[i].gId == groups[j].pk ? 'selected=selected' : ''
mystring1 += '<option value="'+ groups[j].pk + '"' + sld +' > '
+ g[j].f.name+' </option>'
}
mystring1 += '</select>' +
'</div>' +
'</td>' +
'<td style="width: 20%;">' +
'<input id="chkIsActive'+ collection[i].ftId+ '" type="checkbox" '+ isActive +' disabled >' +
'</td>' +
'<td style="width: 12%;">' +
'<div id="EditDelete'+ collection[i].ftId+ '">' +
'<button type=button style="background-color:#0d7458;border-color:#0d7458;" onclick="editFTeams('+ collection[i].ftId+ ')">' +
'<img src="/static/images/Icons/edit-icon.svg" width="12" height="12">' +
'</button>' +
'</div>' +
'<div id="UpdateSave'+ collection[i].ftId+ '" style="display:none">' +
'<button type=button style="background-color:#0d7458;border-color:#0d7458;" onclick="UpdateTeams('+ collection[i].ftId+ ')" >' +
'<img src="/static/images/Icons/save.svg" width="12" height="12"/>' +
'</button>' +
'<button type=button style="background-color:#0d7458;border-color:#0d7458;" onclick="CancelFTeams('+ collection[i].ftId+ ')" >' +
'<img src="/static/images/Icons/cancel.svg" width="12" height="12"/>' +
'</button>' +
'</div>' +
'</td>' +
'</tr>'
$('#allTeams').append(mystring1)        },
complete: function (response) {
},
// handle a non-successful response
error: function (xhr, errmsg, err) {
$('#results').html("<div class='alert-box alert radius' data-alert>Oops! We have encountered an error: " + errmsg +
" <a href='#' class='close'>&times;</a></div>"); // add the error to the dom
console.log(xhr.status + ": " + xhr.responseText); // provide a bit more info about the error to the console
}
});
};

Answer 1

查看django-rest-framework- DataTable -在这里你可以利用DataTable js库和DRF在前端构建动态表。

根据文档，你可以使用这个简单的js代码来构建一个DataTable，前提是你已经设置了一个DRF端点。它具有分页、排序、搜索、过滤等所有优点，而且在我看来，它比内置的Django-admin页面更具动态性。

$(document).ready(function() {
$('#albums').DataTable({
'serverSide': true,
'ajax': '/api/albums/?format=datatables',
'columns': [
{'data': 'rank'},
{'data': 'artist.name', 'name': 'artist.name'},
{'data': 'name'},
{'data': 'year'},
{'data': 'genres', 'name': 'genres.name'},
]
});
});

如果你需要更多的细节，请告诉我。

要了解更多关于数据表的信息，请查看这里的文档。