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

2017-02-18 10:20:04 bootstrap
这篇文章主要介绍了bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法,需要的朋友可以参考下
异步请求         
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刷新表格数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。

原文链接:http://blog.csdn.net/a23764996/article/details/54970539