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实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 jQuery
jquery实现简单实用的轮播器
May 23 jQuery
jquery实现一个全局计时器(商城可用)
Jun 30 jQuery
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
jQuery中可见性过滤器简单用法示例
Mar 31 jQuery
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
Mar 06 jQuery
jQuery中DOM操作原则实例分析
Aug 01 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
十大感人催泪爱情动漫 第一名至今不忍在看第二遍
2020/03/04 日漫
PHP中include()与require()的区别说明
2010/03/10 PHP
PHP中文编码小技巧
2014/12/25 PHP
PHP扩展开发入门教程
2015/02/26 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
PHP文件操作之获取目录下文件与计算相对路径的方法
2016/01/08 PHP
PHP设计模式之装饰器模式实例详解
2018/02/07 PHP
微信公众平台开发教程③ PHP实现微信公众号支付功能图文详解
2019/04/10 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
用jscript启动sqlserver
2007/06/21 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
javascript字符串替换及字符串分割示例代码
2013/12/12 Javascript
javascript中的__defineGetter__和__defineSetter__介绍
2014/08/15 Javascript
js实现兼容IE和FF的上下层的移动
2015/05/04 Javascript
JS图片预加载插件详解
2017/06/21 Javascript
JS中的回调函数实例浅析
2018/03/21 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
vue工程全局设置ajax的等待动效的方法
2019/02/22 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
Python学习之Django的管理界面代码示例
2018/02/10 Python
python一些性能分析的技巧
2020/08/30 Python
详解Django中异步任务之django-celery
2020/11/05 Python
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
某公司.Net方向面试题
2014/04/24 面试题
Java程序员面试题
2013/07/15 面试题
运动会通讯稿400字
2014/01/28 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
求职简历自我评价范例
2014/03/12 职场文书
司仪主持词两篇
2014/03/22 职场文书
一体化教学实施方案
2014/05/10 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
浅谈Python魔法方法
2021/06/28 Java/Android
Python实现滑雪小游戏
2021/09/25 Python