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 相关文章推荐
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 Javascript
javascript的console.log()用法小结
May 31 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
js读取被点击次数的简单实例(从数据库中读取)
Mar 07 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
Sep 16 Javascript
javascript this详细介绍
Sep 19 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
Oct 30 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 Javascript
jQuery实现本地存储
Dec 22 jQuery
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中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
JavaScript中的this实例分析
2011/04/28 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
jquery实现图片等比例缩放以及max-width在ie中不兼容解决
2013/03/21 Javascript
jquery中的事件处理详细介绍
2013/06/24 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
2016/10/29 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
JSON.stringify()方法讲解
2019/01/31 Javascript
JavaScript 作用域实例分析
2019/10/02 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
vant时间控件使用方法详解
2020/12/24 Javascript
[01:58]最残酷竞争 2016国际邀请赛中国区预选赛积分循环赛回顾
2016/06/28 DOTA
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
python实现全盘扫描搜索功能的方法
2019/02/14 Python
Python中捕获键盘的方式详解
2019/03/28 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
如何在django中运行scrapy框架
2020/04/22 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
俞敏洪北大演讲稿
2014/05/22 职场文书
法定代表人授权委托书范文
2014/08/02 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
教师学习八项规定六项禁令思想汇报
2014/09/27 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
项目验收申请报告
2015/05/15 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书