单击按钮后仅刷新 DataTable
Posted
技术标签:
【中文标题】单击按钮后仅刷新 DataTable【英文标题】：Refreshing only DataTable after button click 【发布时间】：2020-03-06 22:21:55 【问题描述】：在将数据插入数据库后尝试刷新此数据表时遇到了一些麻烦。我希望数据表在 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
);
);
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;
<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>
【问题讨论】：
【参考方案1】：我没有经常使用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()，然后遍历您的数据并将每一行追加到表中：
$.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);
);
我还没有测试过代码，但我相信你明白了这个想法并让它发挥作用，因为我也使用了与我的一个项目类似的逻辑。
【讨论】：
【参考方案2】：插入评论后刷新表格怎么样？
$('#projDiscComTable').DataTable().ajax.reload();
$.ajax(
url: 'post_project_definition',
type: 'GET',
data:
discID: $("#disciplinesProjDef").val(),
discComment: $("#txtDiscipComment").val(),
,
success: () =>
$('#projDiscComTable').DataTable().ajax.reload();
swal(
type: 'success',
title: 'Your comment has been added successfully'
);
)
不确定这是否符合您的要求，但您仍然可以在插入评论后刷新它。
【讨论】：
【参考方案3】：我想通了，我在 ajax 中重新绘制了成功的表格，从我所看到的情况来看，它似乎可以工作。但谢谢你所有的答案。以后我会使用你们建议的。
var ProjDefTable = [];
$('#btnDiscipCommPost').on('click', () =>
$.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, (i) =>
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> <span id='" + data[i].id + "deleted' style='display: none; font-weight: 700;'>DELETED</span>"+
"<script>"+
" $('#"+data[i].id+"delete').on('click', () => " +
" $.ajax("+
" url: 'delete_project_definition',"+
" type: 'GET',"+
" data: "+
" project_def_id: '"+data[i].id+"' "+
" ,"+
" success: () => "+
" var x = document.getElementById('" + data[i].id + "delete');" +
" x.style.display = 'none';" +
" var y = document.getElementById('" + data[i].id + "deleted');" +
" y.style.display = 'block';" +
" "+
" );"+
" );" +
"</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
);
var ProjDefTable = [];
)
);
【讨论】：
以上是关于单击按钮后仅刷新 DataTable的主要内容，如果未能解决你的问题，请参考以下文章