• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法

bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法

作者:拖油瓶ZZH 字体:[增加 减小] 来源:互联网 时间:2017-05-11

拖油瓶ZZH通过本文主要向大家介绍了bootstrap datatable,datatable ajax,jquery datatable,jquery datatable api,jquery datatable分页等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

异步请求         

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("新增失败");
    }
   })
</div>

数据处理函数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;
 }
</div>

以上所述是小编给大家介绍的bootstrap jquery dataTable 异步ajax刷新表格数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法

相关文章

  • 2017-05-11jQuery实现级联下拉框实战(5)
  • 2017-05-11jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
  • 2017-05-11常用的几个JQuery代码片段
  • 2017-05-11EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法
  • 2017-05-11BootStrap实现鼠标悬停下拉列表功能
  • 2017-05-11利用Node.js编写跨平台的spawn语句详解
  • 2017-05-11React中ES5与ES6写法的区别总结
  • 2017-05-11jquery中each循环的简单回滚操作
  • 2017-05-11微信小程序实战之运维小项目
  • 2017-05-11JS高仿抛物线加入购物车特效实现代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • MUI 上拉刷新/下拉加载功能实例代码
    • vuejs2.0实现一个简单的分页示例
    • jQuery表单插件ajaxForm实例详解
    • Jquery-data的三种用法
    • Bootstrap布局之栅格系统学习笔记
    • js数字计算 误差问题的快速解决方法
    • javascript实现一个网页加载进度loading
    • Vue表单验证插件Vue Validator使用方法详解
    • 详解nodejs微信公众号开发——2.自动回复
    • JS ES6多行字符串与连接字符串的表示方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有