JQuery Ajax动态加载Table数据的实例讲解
我们在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数据的实例讲解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。