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 相关文章推荐
jscript之Open an Excel Spreadsheet
Jun 13 Javascript
动态加载JS文件的三种方法
Nov 08 Javascript
jquery五角星评分插件示例分享
Feb 21 Javascript
禁用Enter键表单自动提交实现代码
May 22 Javascript
jquery实现列表上下移动功能
Feb 25 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
Mar 30 Javascript
BootStrap selectpicker后台动态绑定数据
Jun 01 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
解决layui 复选框等内置控件不显示的问题
Aug 14 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
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
php,不用COM,生成excel文件
2006/10/09 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
学习php设计模式 php实现策略模式(strategy)
2015/12/07 PHP
PHP的Yii框架中移除组件所绑定的行为的方法
2016/03/18 PHP
Yii全局函数用法示例
2017/01/22 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
2015/09/19 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
Vue的土著指令和自定义指令实例详解
2018/02/04 Javascript
简单明了区分escape、encodeURI和encodeURIComponent
2018/05/26 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
使用Node搭建reactSSR服务端渲染架构
2018/08/30 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
分享一个常用的Python模拟登陆类
2015/03/29 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
Python字符串中添加、插入特定字符的方法
2019/09/10 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
PyQt5实现简单的计算器
2020/05/30 Python
idea2020手动安装python插件的实现方法
2020/07/17 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
库存图片、照片、矢量图、视频和音乐:Shutterstock
2021/02/12 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
自考生毕业自我鉴定
2013/10/10 职场文书
手术室护士自我鉴定
2013/10/14 职场文书
英文自荐信
2013/12/19 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
2014年机关党委工作总结
2014/12/11 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
Golang获取List列表元素的四种方式
2022/04/20 Golang