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 相关文章推荐
AJAX的跨域与JSONP(为文章自动添加短址的功能)
Jan 17 Javascript
javascript强大的日期函数代码分享
Sep 04 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
学习Node.js模块机制
Oct 17 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
Mar 01 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
VUE 使用中踩过的坑
Feb 08 Javascript
这15个Vue指令,让你的项目开发爽到爆
Oct 11 Javascript
Vue快速实现通用表单验证的方法
Feb 24 Javascript
Node.js 中判断一个文件是否存在
Aug 24 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实现递归抓取网页类实例
2015/04/03 PHP
PHP 等比例缩放图片详解及实例代码
2016/09/18 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
7个Javascript地图脚本整理
2009/10/20 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
javascript中 try catch用法
2015/08/16 Javascript
jQuery+html5+css3实现圆角无刷新表单带输入验证功能代码
2015/08/21 Javascript
跟我学习javascript的异步脚本加载
2015/11/20 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
BootStrop前端框架入门教程详解
2016/12/25 Javascript
HTML5 js实现拖拉上传文件功能
2020/11/20 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
微信小程序三级联动地址选择器的实例代码
2017/07/12 Javascript
elementui的默认样式修改方法
2018/02/23 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
区别JavaScript函数声明与变量声明
2018/09/12 Javascript
Element Table的row-class-name无效与动态高亮显示选中行背景色
2018/11/30 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
[07:37]DOTA2-DPC中国联赛2月2日Recap集锦
2021/03/11 DOTA
Python的自动化部署模块Fabric的安装及使用指南
2016/01/19 Python
python使用fork实现守护进程的方法
2017/11/16 Python
python爬虫增加访问量的方法
2019/08/22 Python
Python的缺点和劣势分析
2019/11/19 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
用css3实现当鼠标移进去时当前亮其他变灰效果
2014/04/08 HTML / CSS
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
幼师自荐信
2013/10/26 职场文书
毕业生优秀推荐信
2013/11/26 职场文书
2014年党支部学习材料
2014/05/19 职场文书
法学专业求职信
2014/07/15 职场文书
国庆庆典邀请函
2015/02/02 职场文书
公司行政主管岗位职责
2015/04/09 职场文书
计算机教师工作总结
2015/08/13 职场文书
javascript数组includes、reduce的基本使用
2021/07/02 Javascript