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 文件传参及处理技巧分析
May 13 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 Javascript
js 文本滚动效果的实例代码
Aug 17 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
同一个网页中实现多个JavaScript特效的方法
Feb 02 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
JavaScript实现公历转农历功能示例
Feb 13 Javascript
javascript事件的绑定基础实例讲解(34)
Feb 14 Javascript
一道面试题引发的对javascript类型转换的思考
Mar 06 Javascript
Vue中util的工具函数实例详解
Jul 08 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
uni-app如何页面传参数的几种方法总结
Apr 28 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
window+nginx+php环境配置 附配置搭配说明
2010/12/29 PHP
php 中phar包的使用教程详解
2018/10/26 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
Ubuntu 16.04中Laravel5.4升级到5.6的步骤
2018/12/07 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
jQuery.Validate验证库的使用介绍
2013/04/26 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
jQuery设置与获取HTML,文本和值的简单实例
2014/02/26 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
微信小程序实现图片上传、删除和预览功能的方法
2017/12/18 Javascript
JS小球抛物线轨迹运动的两种实现方法详解
2017/12/20 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
微信小程序修改checkbox的样式代码实例
2020/01/21 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
python实现给字典添加条目的方法
2014/09/25 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
Python实现学生成绩管理系统
2020/04/05 Python
pycharm运行出现ImportError:No module named的解决方法
2018/10/13 Python
对python 命令的-u参数详解
2018/12/03 Python
python字符串下标与切片及使用方法
2020/02/13 Python
研究生自我鉴定范文
2013/10/30 职场文书
大学生饮食配送创业计划书
2014/01/04 职场文书
生物制药专业自我鉴定
2014/02/19 职场文书
股份转让协议书
2014/04/12 职场文书
商场促销活动策划方案
2014/08/18 职场文书
禁毒宣传活动总结
2014/08/26 职场文书
群教班子对照检查材料
2014/08/26 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python