AlanNote

使用插建 datatables http://datatables.net

views

<!-- 刪除欄位按鈕 -->
<button id="delete" type="button" class="btn btn-danger mb-3">刪除</button>

<!-- 使用的Table -->
<table id="example" class="table table-striped table-bordered" style="width:100%">
  <thead>
    <tr>
      <th>表單欄位</th>
    </tr>
  </thead>
  <tbody>
    <% @table.each do |g| %>
      <tr id=<%= g.id%>>
        <td><%= g.id %></td>
      </tr>
    <% end %>
  </tbody>
</table>

javascript

    var table = $('#example').DataTable();
    //選取欄位
    $('#example tbody').on( 'click', 'tr', function () {
      $(this).toggleClass('selected');
    } );
    //點擊刪除按鈕
    $('#delete').click( function () {
      DeleteSelectTable()
      //移除選取的欄位
      table.rows('.selected').remove().draw( false );
    } );
    //使用AJAX刪除資料庫的資料
    function DeleteSelectTable(){
      for (var i = 0; i < table.rows('.selected').data().length; i++) {
        var id = table.rows('.selected').data()[i][0]
        $.ajax({
          url: "/controllers/" + id,
          method: "DELETE",
          dataType: "json"
        });
      }
    }