Bootstrap jQuery DataTable 异步 AJAX 刷新表格数据实现
作者:小括号时间:2026-10-21 21:48:26浏览:370
本文介绍如何利用 Bootstrap 和 jQuery DataTable 实现表格数据的异步 AJAX 刷新。通过定义数据处理函数 packagingdatatabledata 将返回的 JSON 数据转换为表格所需格式,并结合 fnClearTable 与 fnAddData 方法完成数据的清空与动态加载,确保前端界面实时同步后端更新。
异步请求与数据处理实现
实现异步请求功能。
var postData = {
"env_name" : new_env_name,
"env_url": new_env_url,
"env_desc" : new_env_desc
};
$.ajax({
type: 'POST',
url : '/test_env_add/',
data : postData,
dataType : 'json',
success : function(data){
$('#table_test_env').dataTable().fnClearTable(); //清空表格
$('#table_test_env').dataTable().fnAddData(packagingdatatabledata(data),true); //刷下表格
$("#modal-container-648308").modal("hide");
},
error:function(data){
alert("新增失败");
}
})
需要定义数据处理函数 packagingdatatabledata,确保异步请求返回的 data.test_env_all 字段为合法的 JSON 格式数据。
function packagingdatatabledata(data){
var editHtml='<button href="#modal-container-648308" rel="external nofollow" data-toggle="modal" class="btn btn-xs btn-info" onclick="test_env_modify(this)"> <i class="icon-edit bigger-120"></i> </button> <button href="#modal-container-648300" rel="external nofollow" data-toggle="modal" class="btn btn-xs btn-danger" onclick="test_env_delete(this)"> <i class="icon-trash bigger-120"></i> </button>';
var a=[]; //全部行数据的list
var banddata = data.test_env_all;
for(var key in banddata){
var tempObj=[]; //一行数据的list
tempObj.push(banddata[key].id);
tempObj.push(banddata[key].name);
tempObj.push(banddata[key].url);
tempObj.push(banddata[key].desc);
tempObj.push(editHtml);
a.push(tempObj);
}
return a;
}
以上介绍了 Bootstrap 结合 jQuery DataTable 进行异步 AJAX 刷新表格数据的方法,希望能帮助读者解决相关问题。如有任何疑问,欢迎留言,小编将及时回复。感谢大家对本站的支持!
作者最新文章
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
