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下function声明一些小结
Dec 28 Javascript
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
javascript 动态参数判空操作
Dec 22 Javascript
在浏览器窗口上添加遮罩层的方法
Nov 12 Javascript
js中top/parent/frame概述及案例应用
Feb 06 Javascript
JavaScript实现Java中StringBuffer的方法
Feb 09 Javascript
js实现简单计算器
Nov 22 Javascript
深入浅析react native es6语法
Dec 09 Javascript
js实现仿微博滚动显示信息的效果
Dec 21 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
详解从新建vue项目到引入组件Element的方法
Aug 29 Javascript
简单的Vue SSR的示例代码
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
杏林同学录(九)
2006/10/09 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
帝国CMS留言板回复后发送EMAIL通知客户
2015/07/06 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
PHP中的self关键字详解
2019/06/23 PHP
js trim函数 去空格函数与正则集锦
2009/11/20 Javascript
利用NodeJS的子进程(child_process)调用系统命令的方法分享
2013/06/05 NodeJs
javascript计时器事件使用详解
2014/01/07 Javascript
巧用jQuery选择器提高写表单效率的方法
2016/08/19 Javascript
BootStrap Validator对于隐藏域验证和程序赋值即时验证的问题浅析
2016/12/01 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
JavaScript工具库之Lodash详解
2019/06/15 Javascript
[01:14:55]EG vs Spirit Supermajor 败者组 BO3 第三场 6.4
2018/06/05 DOTA
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
Php多进程实现代码
2018/05/07 Python
Python钉钉报警及Zabbix集成钉钉报警的示例代码
2020/08/17 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
用Python制作音乐海报
2021/01/26 Python
html5 offlline 缓存使用示例
2013/06/24 HTML / CSS
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
人力资源行政经理自我评价
2013/10/23 职场文书
千元咖啡店的创业计划书范文
2013/12/29 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
合伙协议书范本
2014/04/21 职场文书
行政求职信
2014/07/04 职场文书
公务员检讨书
2014/11/01 职场文书
学生个人总结范文
2015/02/15 职场文书
国家助学金受助感言
2015/08/01 职场文书
会计主管竞聘书
2015/09/15 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python