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 29 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
jQuery+SpringMVC中的复选框选择与传值实例
Jan 08 jQuery
jQuery替换节点元素的操作方法
Mar 18 jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
vue-cli 引入jQuery,Bootstrap,popper的方法
Sep 03 jQuery
详解jQuery设置内容和属性
Apr 11 jQuery
使用异步controller与jQuery实现卷帘式分页
Jun 18 jQuery
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
jquery插件懒加载的示例
Oct 24 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/06 日漫
追求程序速度,而不是编程的速度
2008/04/23 PHP
判断是否为指定长度内字符串的php函数
2010/02/16 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
ThinkPHP关联模型操作实例分析
2012/09/23 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
php连接mysql数据库最简单的实现方法
2019/09/24 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
动态载入/删除/更新外部 JavaScript/Css 文件的代码
2010/07/03 Javascript
用javascript作一个通用向导说明
2011/08/30 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
2016/04/01 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
JavaScript定时器制作弹窗小广告
2017/02/05 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
2019/04/19 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
Vue实现点击导航栏当前标签后变色功能
2020/08/19 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
[58:18]2018DOTA2亚洲邀请赛3月29日 小组赛B组 iG VS Mineski
2018/03/30 DOTA
python实现学生管理系统
2018/01/11 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
HTML5新特性之语义化标签
2017/10/31 HTML / CSS
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
DataList 能否分页,请问如何实现?
2015/05/03 面试题
考试违纪检讨书
2014/02/02 职场文书
七年级政治教学反思
2014/02/03 职场文书
党员四风自我剖析材料思想汇报
2014/09/13 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
日本十大血腥动漫,那些被禁播的动漫盘点
2022/03/21 日漫
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技