JQuery Ajax动态加载Table数据的实例讲解


Posted in jQuery onAugust 09, 2018

我们在jsp定义一个select和一个table,要求实现根据select的选值,动态加载table数据。

<select id="type" name="type" onchange="reloadTable(this)"></select>
<table id="import-table" class="table table-striped table-bordered table-hover" width="100%"></table>

table第一次加载数据的function定义如下:

function loadData() {
 var c = '<label><input type="checkbox" id="checkbox1" class="ace" onchange="javascrpt:selectAll(this);"/><span class="lbl"></span></label>';
 $('#import-table').DataTable({
  ajax: {
   url: '<%=request.getContextPath()%>' + "../../../hot/getByCode.action?code=APP",
   type: "post",
   dataType: "json",
   data: {}
  },
  "scrollCollapse": true,
  ordering: false,
  visible: true,
  api: true,
  serverSide: true,
  columns: [{
   "data": "id",
   "class": "center",
   "width": "80px",
   "name": "importId",
   orderable: false,
   "title": c,
   "render": function(a, b, c, d) {
    return getColumnReturnStr("checkbox", c.id, "importId")
   }
  },
  {
   "data": "name",
   "title": "名称"
  },
  ],
  "dom": "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
  initComplete: function() {}
 });
}

接着需要考虑,如何在select选值改变的时候,更新table中ajax的url地址,实现table的reload

function reloadTable(){ 
 var code = $("#type option:selected").val();

 $('#import-table').DataTable()
 .ajax.url( 
  '<%=request.getContextPath()%>'+"../../../hot/getByCode.action?code="+ code
 ).load();

}

这样我们便可以通过改变select选值,动态加载table数据。

通过$(‘#import-table').DataTable().ajax.url().load();方法实现。

以上这篇JQuery Ajax动态加载Table数据的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
简单实现jQuery弹幕效果
May 06 jQuery
jQuery 实现双击编辑表格功能
Jun 19 jQuery
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
Jan 18 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
[jQuery] 事件和动画详解
Mar 05 jQuery
jQuery事件委托代码实践详解
Jun 21 jQuery
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
jQuery 函数实例分析【函数声明、函数表达式、匿名函数等】
May 19 jQuery
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 #jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 #jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 #jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 #jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 #jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 #jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 #jQuery
You might like
基于文本的搜索
2006/10/09 PHP
PHP调用三种数据库的方法(3)
2006/10/09 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
PHP常用的三种设计模式
2017/02/17 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
vue拦截器Vue.http.interceptors.push使用详解
2017/04/22 Javascript
javaScript实现复选框全选反选事件详解
2020/11/20 Javascript
微信小程序 下拉刷新及上拉加载原理解析
2019/11/06 Javascript
微信小程序scroll-view隐藏滚动条的方法详解
2020/03/25 Javascript
基于Cesium绘制抛物弧线
2020/11/18 Javascript
在Python中用keys()方法返回字典键的教程
2015/05/21 Python
在Python中通过threading模块定义和调用线程的方法
2016/07/12 Python
Python爬虫通过替换http request header来欺骗浏览器实现登录功能
2018/01/07 Python
对numpy中的数组条件筛选功能详解
2018/07/02 Python
Python get获取页面cookie代码实例
2018/09/12 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
详解python 内存优化
2020/08/17 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
英国最大的运动营养公司之一:LA Muscle
2018/07/02 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
大学生职业生涯规划书范文
2014/01/14 职场文书
秘书英文求职信范文
2014/01/31 职场文书
初中班主任评语大全
2014/04/24 职场文书
新农村建设标语
2014/06/24 职场文书
建筑安全生产责任书
2014/07/22 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
部队2014年终工作总结
2014/11/27 职场文书
科技活动总结范文
2015/05/11 职场文书
2016年优秀团支部事迹材料
2016/02/26 职场文书
解决mysql的int型主键自增问题
2021/07/15 MySQL