当前位置: 首页 > 编程笔记 >

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

宣俊豪
2023-03-14
本文向大家介绍bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法,包括了bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法的使用技巧和注意事项,需要的朋友参考一下

异步请求         

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刷新表格数据,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!

 类似资料:
  • 本文向大家介绍jQuery ajax请求struts action实现异步刷新,包括了jQuery ajax请求struts action实现异步刷新的使用技巧和注意事项,需要的朋友参考一下 这个样例是用JQuery ajax和struts来做的一个小样例,在这个样例中采用两种方式将java Util中的list转换成支json的格式,第一种是用json-lib.jar这个jar包来转换,第二种是

  • 本文向大家介绍layui实现数据表格table分页功能(ajax异步),包括了layui实现数据表格table分页功能(ajax异步)的使用技巧和注意事项,需要的朋友参考一下 layui实现数据表格table分页功能,异步加载,表格渲染,含条件查询。 一、引入layUI的相关资源 二、html页面代码 搜索表单: 数据表格: 三、后台接收分页参数以及查询条件,获取并返回数据 主要注意下: page

  • 本文向大家介绍php+jQuery+Ajax简单实现页面异步刷新,包括了php+jQuery+Ajax简单实现页面异步刷新的使用技巧和注意事项,需要的朋友参考一下 页面显示如下:  JQueryAjax.html中的代码如下(用的较为简单的$.post)  ajax.php 在非json格式下,后台只能返回字符串,如果想后台返回数组,可以采用json格式  例如将JQueryAjax中的代码修改为

  • 本文向大家介绍Ajax实现表格中信息不刷新页面进行更新数据,包括了Ajax实现表格中信息不刷新页面进行更新数据的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Ajax实现表格中的信息进行更新数据,供大家参考,具体内容如下 html: css:控制单根边框 js: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 本文向大家介绍Ajax实现局部刷新的方法实例,包括了Ajax实现局部刷新的方法实例的使用技巧和注意事项,需要的朋友参考一下 前言 最近复习了一下jQuery的一些内容,特此整理一下一些能用的得到的知识点,以前才学jQuery的时候压根就没有注意到那么多的细节,另外最近一直都在整理前端的一些工作中学到的小经验,大概还会有十篇左右的内容,就会慢慢开始整理后端,框架,以及数据库的一些小知识点 一、 Aj

  • 本文向大家介绍vue.js 表格分页ajax 异步加载数据,包括了vue.js 表格分页ajax 异步加载数据的使用技巧和注意事项,需要的朋友参考一下 Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。 分页一般和表格一起用,分页链接作为表格的一部分,将分页链接封装成一个独立的组件,然后作为子组件嵌入到表格组件中,这样比较合理。 1.注册一个组件 js 模板: H