JQuery Ajax動(dòng)態(tài)加載Table數(shù)據(jù)的實(shí)例講解
我們?cè)趈sp定義一個(gè)select和一個(gè)table，要求實(shí)現(xiàn)根據(jù)select的選值，動(dòng)態(tài)加載table數(shù)據(jù)。
<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第一次加載數(shù)據(jù)的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選值改變的時(shí)候，更新table中ajax的url地址，實(shí)現(xiàn)table的reload
function reloadTable(){
var code = $("#type option:selected").val();
$('#import-table').DataTable()
.ajax.url(
'<%=request.getContextPath()%>'+"../../../hot/getByCode.action?code="+ code
).load();
}
這樣我們便可以通過(guò)改變select選值，動(dòng)態(tài)加載table數(shù)據(jù)。
通過(guò)$(‘#import-table').DataTable().ajax.url().load();方法實(shí)現(xiàn)。
以上這篇JQuery Ajax動(dòng)態(tài)加載Table數(shù)據(jù)的實(shí)例講解就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
jquery實(shí)現(xiàn)可橫向和豎向展開(kāi)的動(dòng)態(tài)下滑菜單效果
這篇文章主要介紹了jquery實(shí)現(xiàn)可橫向和豎向展開(kāi)的動(dòng)態(tài)下滑菜單效果,以實(shí)例形式較為詳細(xì)的分析了jquery實(shí)現(xiàn)橫向與豎向展開(kāi)菜單的相關(guān)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
JQuery復(fù)選框全選效果如何實(shí)現(xiàn)
這篇文章主要介紹了JQuery復(fù)選框全選效果如何實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05
ashx文件與.aspx文件類似，可以通過(guò)它來(lái)調(diào)用HttpHandler類。下面與大家介紹下jquery訪問(wèn)ashx文件的過(guò)程2014-08-08
JS 遍歷 json 和 JQuery 遍歷json操作完整示例
這篇文章主要介紹了JS 遍歷 json 和 JQuery 遍歷json操作,結(jié)合完整實(shí)例形式詳細(xì)分析了JavaScript與jQuery遍歷json格式數(shù)據(jù)的簡(jiǎn)單實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-11-11
基于JQuery的列表拖動(dòng)排序?qū)崿F(xiàn)代碼
基于JQuery的拖動(dòng)插件有幾個(gè)都相當(dāng)好用，效果也很好，但再好，還是自己琢磨一個(gè)最好。所以，我的理念就是即使實(shí)際項(xiàng)目中使用別人的程序，自己也得根據(jù)自己的理解和想法寫一個(gè)出來(lái)。那么今天，就來(lái)看看我的思路是不是可以實(shí)現(xiàn)拖動(dòng)排序的功能2013-10-10![前端開(kāi)發(fā)部分總結(jié)[兼容性、DOM操作、跨域等]（持續(xù)更新）](http://img.jbzj.com/images/xgimg/bcimg5.png)
前端開(kāi)發(fā)部分總結(jié)[兼容性、DOM操作、跨域等]（持續(xù)更新）
在公司做這個(gè)項(xiàng)目已經(jīng)6個(gè)多月了，總結(jié)一些問(wèn)題，也算是拋磚引玉吧，希望更多的朋友一起分享一些技巧。2010-03-03
這篇文章主要介紹了jQuery設(shè)置內(nèi)容和屬性，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
jquery bind(click)傳參讓列表中每行綁定一個(gè)事件
用jquey bind 點(diǎn)擊事件時(shí)，傳參不注意可能會(huì)導(dǎo)致點(diǎn)擊每一行都是顯示相同內(nèi)容的情況,下面有個(gè)示例，感興趣的朋友可以參考下2014-08-08
自己動(dòng)手寫的jquery分頁(yè)控件(非常簡(jiǎn)單實(shí)用)
最近接了一個(gè)項(xiàng)目，其中有需求要用到j(luò)query分頁(yè)控件，上網(wǎng)也找到了需要分頁(yè)控件，各種寫法各種用法，都是很復(fù)雜，最終決定自己動(dòng)手寫一個(gè)jquery分頁(yè)控件，全當(dāng)是練練手了2015-10-10
jQuery插件jquery.kxbdmarquee.js實(shí)現(xiàn)無(wú)縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了jQuery常用插件jquery.kxbdmarquee.js使用方法詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02