在将数据插入数据库后,尝试刷新此数据表时遇到了一些麻烦。我希望数据表在 javascript ajax 上刷新,但我不希望刷新整个页面。
我是数据表新手,似乎不知道该怎么做。
如有任何帮助,我们将不胜感激。
JavaScript
$.ajax({
url: 'post_project_definition',
type: 'GET',
data: {
discID: $("#disciplinesProjDef").val(),
discComment: $("#txtDiscipComment").val(),
},
success: () => {
swal({
type: 'success',
title: 'Your comment has been added successfully'
});
}
})
$.getJSON('selectProjectDefinitionDescription', function (data) {
$.each(data, function (i, item) {
ProjDefTable.push([data[i].id,data[i].definition_name, data[i].description,
"<input type='button' class='btn btn-danger' id='" + data[i].id + "delete' value='-'></input>"+
"<script>"+
" $('#"+data[i].id+"delete').on('click', () => {" +
" $.ajax({"+
" url: 'delete_project_definition',"+
" type: 'GET',"+
" data: { "+
" project_def_id: '"+data[i].id+"' "+
" },"+
" });"+
" });" +
"</script>"
]);
var table = $("#projDiscComTable").DataTable();
table.clear().draw();
table = $("#projDiscComTable").DataTable({
data: ProjDefTable,
columns: [
{title: "ID"},
{ title: "Discipline Name" },
{ title: "Discipline Description" },
{ title: "Delete" },
],
destroy: true
});
})//end else
});
});
PHP
public function selectProjectDefinitionDescription()
{
$session_data = $this->session->userdata('logged_in');
$id = $session_data['id'];
$type = $session_data['usertype'];
$project_id = $session_data['project_id'];
$stuff = $this->Projects_Model->load_Project_Definition_Discipline($project_id);
echo $stuff;
}
HTML
<table id="projDiscComTable" class="table table-hover display">
<thead>
<tr>
<th>ID</th>
<th>Disciple</th>
<th>Discipline Comment</th>
<th>Delete</th>
</tr>
</thead>
</table>
最佳答案
我没有太多使用DataTable
,但我相信它们的使用是为了向您的 HTML 表格提供各种功能,例如轻松排序等。 (Reference)
说到这里的问题,我相信您的范围是根据 AJAX 响应刷新表格的内容,而不必刷新整个页面。
您可以使用 jQuery 的 append()
和 remove()
函数来完成此操作。一个简单的算法如下:
- 首先,您可以在页面中的某个位置隐藏一行 HTML 示例,如下所示:
<div id="definition-row-sample">
<tr class="definition-row">
<td class="definition-id"></td>
<td class="definition-name"></td>
<td class="definition-description"></td>
<td class="definition-delete"></td>
</tr>
</div>
- 隐藏
.definition-row
,使其不会显示在您的页面中。 - 现在,当您通过 AJAX 获取数据时,首先使用以下命令删除所有行:
$('.definition-row').remove()
,然后循环遍历数据并将每一行附加到您的餐 table :
$.each(data, function (i, item) {
$('#definition-row-sample').find('.definition-id').text(data[i].id);
$('#definition-row-sample').find('.definition-name').text(data[i].definition_name);
$('#definition-row-sample').find('.definition-description').text(data[i].description);
//then simply append it to the table
let content = $('#definition-row-sample').find('.definition-row').clone();
$('#projDiscComTable').append(content);
});
至于删除,您可以定义一个普通函数,例如:
function definition_delete(id) {
$.ajax({
url: 'delete_project_definition',
type: 'GET',
data: {
project_def_id:id
}
});
}
document.on('click', '.definition-delete', function(){
let id = $(this).parent().find('.definition-id').text();
definition_delete(id);
});
我还没有测试过代码,但我确信您明白了这个想法并使其工作,因为我也对我的一个项目使用了类似的逻辑。
关于php - 单击按钮后仅刷新数据表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58797825/