JQuery Ajax動的にTableデータをロードする実例解説

私たちはjspでselectと一つのtableを定義して、selectの選択値によって、tableデータを動的にロードすることを要求します。

<select id="type" name="type" onchange="reloadTable(this)"></select>
<table id="import-table" class="table table-striped table-bordered table-hover" width="100%"></table>

テーブルの最初のロードデータの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() {}
 });
}

次に、どのようにセレクト値が変更された時に、テーブルの中のajaxのurlアドレスを更新し、テーブルのreloadを実現するかを考えます。

function reloadTable(){ 
 var code = $("#type option:selected").val();

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

}

このように、私達はselectの選択値を変えることによって、tableデータを動的にロードすることができます。
を通して.DataTable().ajax.url().load()方法を実現します。
以上のJQuery AjaxはTableデータを動的にロードした実例解説は小編集が皆さんに提供した内容の全部です。参考にしていただければ幸いです。どうぞよろしくお願いします。