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 IE和FF兼容性问题汇总
Feb 09 Javascript
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
jquery隐藏标签和显示标签的实例
Nov 11 Javascript
js判断变量初始化的三种形式及推荐用的形式
Jul 22 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
jQuery实现鼠标滑过图片移动特效
Dec 08 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
react-native-video实现视频全屏播放的方法
Mar 19 Javascript
Angularjs 根据一个select的值去设置另一个select的值方法
Aug 13 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
javascript二维数组和对象的深拷贝与浅拷贝实例分析
Oct 26 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/12/06 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
Memcached常用命令以及使用说明详解
2013/06/27 PHP
PHP实现找出链表中环的入口节点
2018/01/16 PHP
PHP封装的mysqli数据库操作类示例
2019/02/16 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
javascript SpiderMonkey中的函数序列化如何进行
2012/12/05 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
AngularJs表单验证实例详解
2016/05/30 Javascript
你不需要jQuery(三) 新AJAX方法fetch()
2016/06/14 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
2017/03/02 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
详解Vue用axios发送post请求自动set cookie
2017/05/10 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
node.js使用fs读取文件出错的解决方案
2019/10/23 Javascript
vue点击自增和求和的实例代码
2019/11/06 Javascript
基于原生js实现判断元素是否有指定class名
2020/07/11 Javascript
fastcgi文件读取漏洞之python扫描脚本
2017/04/23 Python
Python装饰器知识点补充
2018/05/28 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
Pycharm自带Git实现版本管理的方法步骤
2020/09/18 Python
解决Pycharm 运行后没有输出的问题
2021/02/05 Python
美国钻石商店:Zales
2016/11/20 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
新西兰优惠网站:Treat Me
2019/07/04 全球购物
俄罗斯一家时尚女装商店:Charuel
2019/12/04 全球购物
大一新生军训时的自我评价分享
2013/12/05 职场文书
禁毒宣传工作方案
2014/05/23 职场文书
质量在我心中演讲稿
2014/09/02 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书
简历自我评价范文
2019/04/24 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL