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中eval详解
Mar 30 Javascript
JavaScript多线程详解
Aug 12 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
js防阻塞加载的实现方法
Sep 09 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
Sep 22 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
微信小程序实现选项卡效果
Nov 06 Javascript
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 11 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
在PHP模板引擎smarty生成随机数的方法和math函数详解
2014/04/24 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
PHP实现与java 通信的插件使用教程
2019/08/11 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
JavaScript进阶教程(第四课第一部分)
2007/04/05 Javascript
传智播客学习之java 反射
2009/11/22 Javascript
js三种排序算法分享
2012/08/16 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
2012/11/13 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
基于Vue.js的表格分页组件
2016/05/22 Javascript
ES6中参数的默认值语法介绍
2017/05/03 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
JS实现简单打字测试
2020/06/24 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
[00:28]DOTA2北京网鱼队选拔赛
2015/04/08 DOTA
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
python数组复制拷贝的实现方法
2015/06/09 Python
Python切片知识解析
2016/03/06 Python
Python面向对象编程中关于类和方法的学习笔记
2016/06/30 Python
对Python实现累加函数的方法详解
2019/01/23 Python
在django中自定义字段Field详解
2019/12/03 Python
tensorflow 查看梯度方式
2020/02/04 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
Python 判断时间是否在时间区间内的实例
2020/05/16 Python
2014年文艺部工作总结
2014/11/17 职场文书
公务员政审个人总结
2015/02/12 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
Redis Cluster集群动态扩容的实现
2021/07/15 Redis
pt-archiver 主键自增
2022/04/26 MySQL