好资源导航 » 文章资讯 » JQuery Ajax动态加载Table数据的实例讲解

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

2023-09-09 06:03:05 313

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

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

functionloadData(){
varc='';
$('#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){
returngetColumnReturnStr("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

functionreloadTable(){
varcode=$("#typeoption:selected").val();

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

}

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

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

以上这篇JQueryAjax动态加载Table数据的实例讲解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

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

热门推荐

随机推荐