JQuery Ajax動態(tài)加載Table數(shù)據(jù)的實例講解
我們在jsp定義一個select和一個table,要求實現(xiàn)根據(jù)select的選值,動態(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選值改變的時候,更新table中ajax的url地址,實現(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(); }
這樣我們便可以通過改變select選值,動態(tài)加載table數(shù)據(jù)。
通過$(‘#import-table').DataTable().ajax.url().load();方法實現(xiàn)。
以上這篇JQuery Ajax動態(tài)加載Table數(shù)據(jù)的實例講解就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
基于jQuery的判斷iPad、iPhone、Android是橫屏還是豎屏的代碼
在ipad、iphone網(wǎng)頁開發(fā)中,我們很可能需要判斷是橫屏或者豎屏。下面就來介紹如何用 jQuery 判斷iPad、iPhone、Android是橫屏還是豎屏的方法2014-05-05使用CSS和jQuery模擬select并附提交后取得數(shù)據(jù)的代碼
使用CSS和jQuery模擬select并實現(xiàn)提交后取得數(shù)據(jù),詳細實現(xiàn)及截圖如下,感興趣的朋友可以參考下2013-10-10解決html-jquery/js引用外部圖片時遇到看不了或出現(xiàn)403的問題
下面小編就為大家?guī)硪黄鉀Qhtml-jquery/js引用外部圖片時遇到看不了或出現(xiàn)403的問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09Jquery修改image的src屬性,圖片不加載問題的解決方法
下面小編就為大家?guī)硪黄狫query修改image的src屬性,圖片不加載問題的解決方法。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考,一起跟隨小編過來看看吧2016-05-05