javascript - 在 AJAX 成功重新加载 DATATABLE 而不刷新页面
问题描述
我有一个使用Datatable
插件的表。我已经过滤了要删除的内容,删除后,我设法清空了该值。
之后,如果我想再次使用相同的文本进行过滤,例如,我有ba 1
并且ba 2
在删除之后,当我在过滤器文本区域字段中ba 1
输入时它仍然显示单元格。ba
它假设显示ba
尚未删除的剩余部分。
供您参考,我没有使用内置Datatable Ajax
方法。
我想要做的是我希望它用新数据重新加载表而不刷新页面ajax on success
。怎么做?
我的数据表:
var table1 = $('#table1').DataTable(
{
pageLength : 500,
lengthChange: false,
deferRender: true,
scrollY: 800,
scrollCollapse: true,
scrollX: true,
bSort: false,
cache: true,
autoWidth: false,
columnDefs: [
{
targets: 0,
checkboxes:
{
selectRow: true
}
}
],
select: {
style: 'multi',
selector: 'td:not(:nth-child(4), :nth-child(5), :nth-child(6), :nth-child(9), :nth-child(10), :nth-child(13), :nth-child(14), :nth-child(15), :nth-child(16), :nth-child(17), :nth-child(18), :nth-child(19), :nth-child(20), :nth-child(21), :nth-child(22), :nth-child(23), :nth-child(24), :nth-child(25))'
}
});
这是我的过滤功能代码:
table1.columns().every(function ()
{
var table = this;
$('.filter', this.header()).on('keyup change', delay(function (settings, data, dataIndex)
{
if (table.search() !== this.value)
{
table.search(this.value).draw();
}
}, 500));
});
这是我根据选中复选框删除的 AJAX 成功代码:
$('.btnN2').click(function(){
var answer = confirm('Delete N2 : Are you sure you want to delete selected items?');
if (answer)
{
console.log('yes');
var rows = $(table1.rows({selected: true}).$('input[type="checkbox"]').map(function()
{
return $(this).prop("checked") ? $(this).closest('tr').attr('data-getstockcode') : null;
}));
var getstockcodes = [];
$.each(rows, function(index, rowId)
{
console.log(rowId)
getstockcodes.push(rowId);
});
$.ajax({
url: 'del_n2',
type: 'GET',
data: {"getstockcodes": JSON.stringify(getstockcodes)},
dataType: 'JSON',
success:function(data){
console.log(data);
$(table1.rows({selected: true}).$('input[type="checkbox"]').map(function()
{
if($(this).prop("checked"))
{
$(this).parents("tr:eq(0)").find(".note2").val('');
console.log('reset');
}
}));
}
});
}
else
{
console.log('cancel');
}
});
这是我基于 keyup 事件的插入数据
$(".note2").keyup(delay(function()
{
var stockcode = $(this).data("stockcode");
var stockname = $(this).data("stockname");
var value = $(this).val().replace(/(\r\n|\n)/g, "\\n");
$.ajax({
url: 'saveNote2',
type: 'GET',
data: 'stockcode='+stockcode+'&stockname='+stockname+'&value='+value,
dataType: 'JSON',
success: function(data){
console.log(data);
},
error: function(data){
console.log(data);
}
});
}, 300));
解决方案
只需将其添加到您的成功功能中
table1.ajax.reload()
如果您使用的是 ajax 数据表或本地数据表,则需要像这样
table1.clear();
table1.rows.add(your response data array);
table1.draw()
推荐阅读
- algorithm - 为什么区间树需要存储子树的最大右端?
- recaptcha - Google recaptcha 不适用于本地虚拟主机
- ios - 循环隐藏/显示组中的所有 UIButton 控件
- javascript - 当我拥有密钥和值时,为什么会出现错误?
- regex - vim如何替换行号
- javascript - 如何在 onClick 事件中添加引导类。
- javascript - 加载 Big Size .GLTF MODEL 超过 25mb 时,chrome 崩溃了
- python - 使用 Pandas DataFrame 的饼图
- ibm-cloud - 设置裸机服务器最大端口速度执行
- php - XML:如何从 php 中的孙子的值中获取父项的值