JQuery Ajax动态加载Table数据的实例讲解
更新时间：2018年08月09日 09:34:24 作者：屈文哲
今天小编就为大家分享一篇JQuery Ajax动态加载Table数据的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
我们在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 实现扁平式小清新导航，文中示例代码非常详细，帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-07-07
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
在ipad、iphone网页开发中，我们很可能需要判断是横屏或者竖屏。下面就来介绍如何用 jQuery 判断iPad、iPhone、Android是横屏还是竖屏的方法2014-05-05
使用CSS和jQuery模拟select并附提交后取得数据的代码
使用CSS和jQuery模拟select并实现提交后取得数据，详细实现及截图如下，感兴趣的朋友可以参考下2013-10-10
jQuery 自定义函数写法分享，需要的朋友可以参考下2012-03-03
这篇文章主要介绍了jQuery中triggerHandler()方法用法,实例分析了triggerHandler()方法的功能、定义及触发被选元素的指定事件类型的使用技巧,需要的朋友可以参考下2015-01-01
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
下面小编就为大家带来一篇解决html-jquery/js引用外部图片时遇到看不了或出现403的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要为大家详细介绍了jQuery实现弹幕特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-11-11
这篇文章介绍了Jquery定义对象(闭包)与扩展对象成员的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
Jquery修改image的src属性,图片不加载问题的解决方法
下面小编就为大家带来一篇Jquery修改image的src属性,图片不加载问题的解决方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-05-05
jQuery EasyUI 是一个基于 jQuery 的框架，集成了各种用户界面插件。接下来通过本文给大家介绍jQuery Easyui实现左右布局，涉及到到easyui左右布局相关知识，感兴趣的朋友一起学习吧2016-01-01
最新评论