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 相关文章推荐
Jquery中增加参数与Json转换代码
Nov 20 Javascript
JavaScript 笔记二 Array和Date对象方法
May 22 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
AngularJs基本特性解析(一)
Jul 21 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
微信小程序实现多个按钮toggle功能的实例
Jun 13 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
使用vuepress搭建静态博客的示例代码
Feb 14 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
Dec 02 Javascript
JavaScript使用setTimeout实现倒计时效果
Feb 19 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 获取远程文件内容的函数代码
2010/03/24 PHP
PHPMailer邮件发送的实现代码
2013/05/04 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
Yii2――使用数据库操作汇总(增删查改、事务)
2016/12/19 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
jquery 操作表格实现代码(多种操作打包)
2011/03/20 Javascript
jQuery Tools tooltip使用说明
2012/07/14 Javascript
浅析JQuery UI Dialog的样式设置问题
2013/12/18 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
2015/04/30 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
JQuery.dataTables表格插件添加跳转到指定页
2017/06/09 jQuery
最全正则表达式总结:验证QQ号、手机号、Email、中文、邮编、身份证、IP地址等
2017/08/16 Javascript
vue router demo详解
2017/10/13 Javascript
jQuery实现碰到边缘反弹的动画效果
2018/02/24 jQuery
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
2020/07/21 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
原生js拖拽功能制作滑动条实例代码
2021/02/05 Javascript
python计算牛顿迭代多项式实例分析
2015/05/07 Python
Python分治法定义与应用实例详解
2017/07/28 Python
基于pip install django失败时的解决方法
2018/06/12 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
Python实现线性插值和三次样条插值的示例代码
2019/11/13 Python
pyspark 随机森林的实现
2020/04/24 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
Keras 切换后端方式(Theano和TensorFlow)
2020/06/19 Python
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
岳父生日宴会答谢词
2014/01/13 职场文书
小学毕业家长寄语
2014/01/19 职场文书
优秀护士先进事迹
2014/05/08 职场文书
Python实现简单的猜单词
2021/06/15 Python