欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery Ajax動(dòng)態(tài)加載Table數(shù)據(jù)的實(shí)例講解

 更新時(shí)間：2018年08月09日 09:34:24   作者：屈文哲  
今天小編就為大家分享一篇JQuery Ajax動(dòng)態(tài)加載Table數(shù)據(jù)的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

我們?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)文章

最新評(píng)論