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 23 jQuery
基于jquery实现二级联动效果
Mar 30 jQuery
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
jQuery插件Validation表单验证详解
May 26 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
超好用的jQuery分页插件jpaginate用法示例【附源码下载】
Dec 06 jQuery
JS实现点击生成UUID的方法完整实例【基于jQuery】
Jun 12 jQuery
jquery实现的分页显示功能示例
Aug 23 jQuery
jquery自定义组件实例详解
Dec 31 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
PHP 面向对象 PHP5 中的常量
2010/05/05 PHP
php中将字符串转为HTML的实体引用的一个类
2013/02/03 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
JS 密码强度验证(兼容IE,火狐,谷歌)
2010/03/15 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
微信小程序 教程之wxapp 视图容器 view
2016/10/19 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
vue 项目打包通过命令修改 vue-router 模式 修改 API 接口前缀
2018/06/13 Javascript
jQuery中$原理实例分析
2018/08/13 jQuery
javascript设计模式之迭代器模式
2020/01/30 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
2020/11/12 Javascript
35个Python编程小技巧
2014/04/01 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
python实现五子棋游戏
2019/06/18 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
Html5与App的通讯方式详解
2019/10/24 HTML / CSS
英国高街品牌:Miss Selfridge(塞尔弗里奇小姐)
2016/09/21 全球购物
Groupon比利时官方网站:特卖和网上购物高达-70%
2019/08/09 全球购物
大学生个人推荐信范文
2013/11/25 职场文书
浙大毕业生自荐信
2014/01/26 职场文书
研究生考核个人自我鉴定
2014/03/27 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
2016年社区植树节活动总结
2016/03/16 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
2019班干部竞选演讲稿范本!
2019/07/08 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis