JavaScript

超轻量级php框架startmvc

bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法

更新时间:2020-04-21 23:36 作者:startmvc
异步请求         varpostData={"env_name":new_env_name,"env_url":new_env

异步请求         


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刷新表格数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!