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 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
理解Javascript闭包
Nov 01 Javascript
js取模(求余数)隔行变色
May 15 Javascript
js获取IP地址的方法小结
Jul 01 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
js如何打印object对象
Oct 16 Javascript
封装好的javascript前端分页插件pagination
Jan 04 Javascript
Node.js + express基本用法教程
Mar 14 Javascript
Vue.js数字输入框组件使用方法详解
Oct 19 Javascript
vue 动态添加class,三个以上的条件做判断方式
Nov 02 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/09/29 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
2012/02/03 Javascript
使用RequireJS优化JavaScript引用代码的方法
2015/07/01 Javascript
javascript设计模式之对象工厂函数与构造函数详解
2015/07/30 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
跟我学习javascript的基本类型和引用类型
2015/11/16 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
JS中sort函数排序用法实例分析
2016/06/16 Javascript
妙用Bootstrap的 popover插件实现校验表单提示功能
2016/08/29 Javascript
jQuery图片切换动画特效
2016/11/02 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
canvas绘制环形进度条
2017/02/23 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
探讨Vue.js的组件和模板
2017/10/27 Javascript
基于 Vue 实现一个酷炫的 menu插件
2017/11/14 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
Vue项目history模式下微信分享爬坑总结
2019/03/29 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
2020/04/09 Javascript
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
Python计算开方、立方、圆周率,精确到小数点后任意位的方法
2018/07/17 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
印度网上药店:1mg
2017/10/13 全球购物
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
同学聚会主持词
2014/03/18 职场文书
党员先锋岗事迹材料
2014/05/08 职场文书
个人校本研修方案
2014/05/26 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
2014年党建工作总结
2014/11/11 职场文书
违纪检讨书
2015/01/27 职场文书
2015年小学财务工作总结
2015/07/20 职场文书
python数字图像处理:图像简单滤波
2022/06/28 Python