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


Posted in Javascript onFebruary 10, 2017

异步请求         

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

Javascript 相关文章推荐
判断JavaScript对象是否可用的最正确方法分析
Oct 03 Javascript
js 省地市级联选择
Feb 07 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
Mar 29 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
技术男用来对妹子表白的百度首页
Jul 23 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
Oct 04 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
vue中template的三种写法示例
Oct 21 Javascript
使用Typescript开发微信小程序的步骤详解
Jan 12 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 #Javascript
JS实现的数字格式化功能示例
Feb 10 #Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 #Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 #Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 #Javascript
解决URL地址中的中文乱码问题的办法
Feb 10 #Javascript
tablesorter.js表格排序使用方法(支持中文排序)
Feb 10 #Javascript
You might like
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
php目录操作实例代码
2014/02/21 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
PHP中多线程的两个实现方法
2016/10/14 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
jquery键盘事件介绍
2011/01/31 Javascript
php跨域调用json的例子
2013/11/13 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
JQuery分屏指示器图片轮换效果实例
2015/05/21 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
纯css实现窗户玻璃雨滴逼真效果
2015/08/23 Javascript
javascript实现tab切换特效
2015/11/12 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
2015/12/13 Javascript
js倒计时简单实现方法
2015/12/17 Javascript
JavaScript的React Web库的理念剖析及基础上手指南
2016/05/10 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
jQuery获取Table某列的值(推荐)
2017/03/03 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
基于python的汉字转GBK码实现代码
2012/02/19 Python
python应用程序在windows下不出现cmd窗口的办法
2014/05/29 Python
单链表反转python实现代码示例
2018/02/08 Python
TensorFlow实现Softmax回归模型
2018/03/09 Python
用Python实现读写锁的示例代码
2018/11/05 Python
浅析python 中大括号中括号小括号的区分
2019/07/29 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
django 简单实现登录验证给你
2019/11/06 Python
python安装dlib库报错问题及解决方法
2020/03/16 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
Django视图类型总结
2021/02/17 Python
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
翻译学院毕业生自荐书
2014/02/02 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
酒店办公室主任岗位职责
2015/04/01 职场文书
2016年圣诞节寄语(一句话)
2015/12/07 职场文书