bootstrap+jquery+dataTable如何實(shí)現(xiàn)異步ajax刷新表格數(shù)據(jù)

這篇文章主要為大家展示了“bootstrap+jquery+dataTable如何實(shí)現(xiàn)異步ajax刷新表格數(shù)據(jù)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“bootstrap+jquery+dataTable如何實(shí)現(xiàn)異步ajax刷新表格數(shù)據(jù)”這篇文章吧。

異步請(qǐng)求         

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("新增失敗");
    }
   })

數(shù)據(jù)處理函數(shù)packagingdatatabledata，異步請(qǐng)求返回的data.test_env_all必須是一個(gè)json格式數(shù)據(jù)

 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=[]; //全部行數(shù)據(jù)的list
  var banddata = data.test_env_all;
  for(var key in banddata){
   var tempObj=[];  //一行數(shù)據(jù)的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如何實(shí)現(xiàn)異步ajax刷新表格數(shù)據(jù)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！