jQuery Ajax Data Table

使用 jQuery Ajax 讀取資料表格的簡易實作範例

by San-Kai Liao

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twbs-pagination/1.4.1/jquery.twbsPagination.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.6/handlebars.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--
////////////////
    查詢表單
////////////////
-->

<form class="query-form" method="get" action="https://gist.github.com/search">

  <div>
    name:
    <br>
    <input name="name" type="text" class="query-control">
  </div>

  <div>
    gender:
    <br>
    <select name="gender" class="query-control">
      <option vaule="Male">Male</option>
      <option value="Female">Female</option>
    </select>
  </div>

  <div>
    balance:
    <br>
    <input name="balance_min" type="number" class="query-control" value=""> ~
    <input name="balance_min" type="number" class="query-control" value="">
  </div>

  <!-- page: -->
  <input name="p" type="hidden" class="form-control" value="">


</form>

<!--
////////////////
    分頁器
////////////////    
-->
<ul class="query-pagination" data-total-page="100"></ul>

<!--
////////////////
    資料表格
////////////////    
-->
<table class="query-table table">
  <thead>
    <tr>
      <th>id</th>
      <th>name</th>
      <th>balance</th>
      <th>gender</th>
    </tr>
  </thead>
  <tbody>
    <script id="datarow-template" type="x-tmpl-mustache">
      {{#data}}
      <tr>
        <th>{{ id }}</th>
        <th>{{ name }}</th>
        <th>{{ balance}} </th>
        <th>{{ gender}} </th>
      </tr>
      {{/data }}
    </script>
  </tbody>
</table>

JavaScript

$(document).ready(function() {
  /**
   * 假的資料伺服器
   */
  var $getJSON = null;
  $.ajax({
    async: false,
    url: 'https://www.mockaroo.com/623bbeb0/download?count=1000&key=23e00070'
  }).done(function(fakeData) {
    $getJSON = function(url, params, callback) {
      return callback({
        "data": fakeData
      });
    };
  });


  // 分頁器頁碼改變，就同步更新查詢表單中的頁碼條件
  $('.query-pagination').twbsPagination({
    totalPages: $('.query-pagination').data('total-page'),
    visiblePages: 7,
    onPageClick: function(event, page) {
      $('.query-form').find('input[name="p"]').val(page).trigger('change');
    }
  });

  // 任何查詢條件改變，就送出查詢表單
  $('.query-form').on('change', '.form-control', function(evt) {
    $(evt.currentTarget).parents('.query-form').submit();
  });

  // 收集查詢表單中的條件，以 Ajax 方式送出
  $('.query-form').on('submit', function(evt) {
    evt.preventDefault();
    var url = $(evt.currentTarget).prop('action');
    var params = $(evt.currentTarget).serializeObject();
    var source = $("#datarow-template").html();
    var template = Handlebars.compile(source);

    $getJSON(url, params, function(responseData) {
      $('table.query-table').find('tbody').empty().append(template(responseData));
    });

  });
});