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 相关文章推荐
js出生日期 年月日级联菜单示例代码
Jan 10 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
详解Vue.js之视图和数据的双向绑定(v-model)
Jun 23 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
js脚本编写简单刷票投票系统
Jun 27 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
前端常见跨域解决方案(全)
Sep 19 Javascript
解析Vue.js中的组件
Feb 02 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
JavaScript TAB栏切换效果的示例
Nov 05 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
IIS6.0+PHP5.x+MySQL5.x+Zend3.0x+GD+phpMyAdmin2.8x通用安装实例(已经完成)
2006/12/06 PHP
一个数据采集类
2007/02/14 PHP
使用GROUP BY的时候如何统计记录条数 COUNT(*) DISTINCT
2011/04/23 PHP
PHP内核探索:变量概述
2014/01/30 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
单击复制文字兼容各浏览器的完美解决方案
2013/07/04 Javascript
Javascript动态引用CSS文件的2种方法介绍
2014/06/06 Javascript
浅谈javascript函数式编程
2015/09/06 Javascript
使用Javascript写的2048小游戏
2015/11/25 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
jQuery三组基本动画与自定义动画操作实例总结
2020/05/09 jQuery
js实现带有动画的返回顶部
2020/08/09 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
Python ORM框架SQLAlchemy学习笔记之关系映射实例
2014/06/10 Python
创建pycharm的自定义python模板方法
2018/05/23 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
Python学习笔记之函数的定义和作用域实例详解
2019/08/13 Python
python列表插入append(), extend(), insert()用法详解
2019/09/14 Python
python之array赋值技巧分享
2019/11/28 Python
Python time库基本使用方法分析
2019/12/13 Python
python 实现图片批量压缩的示例
2020/12/18 Python
艺术专业大学生自我评价
2013/09/22 职场文书
服装设计行业个人的自我评价
2013/12/20 职场文书
学习新党章思想汇报
2014/01/09 职场文书
50岁生日感言
2014/01/23 职场文书
小学体育教学反思
2014/01/31 职场文书
学校宣传标语
2014/06/18 职场文书
解放思想大讨论活动心得体会
2014/09/11 职场文书
开国大典观后感
2015/06/04 职场文书
感谢信的技巧及范例
2019/05/15 职场文书