1

I use jquery datatables to show datatable datas and jQuery DataTables Checkboxes plugin to choose multiple row datas to post to the server side.

My datatable's data source is from DOM, the checkbox data is actually the row id in the database. Now I want to add several buttons upon/below the datatable, but I don't know how to realize. When I select the checkboxes which I want to post the id data to the server side, and click button A, this action will trigger server side ajax operations.(or click button B to trigger another ajax operations).

I have seen gyrocode's example, but in my case, different buttons correspond to different urls to perform different ajax operations. I'm a front-end rookie, I will appreciate your comments.

This is the html(use Jinja2 template) and js part of datatable:

$(document).ready(function() {
  $('#dataTables-hosts').DataTable({
    'scrollY': "600px",
    'scrollCollapse': "true",
    'columnDefs': [{
      'targets': 0,
      'checkboxes': {
        'selectRow': true
      }
    }],
    'select': {
      'style': 'multi'
    },
    'order': [
      [1, 'asc']
    ]
  });
});
<div class="panel-body">
  <div class="row">
    <div class="col-sm-12">
      <table width="100%" class="display" id="dataTables-hosts">
        <thead>
          <tr>
            <th></th>
            <th>IP Address</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          <!-- for -->
          {% for host in hosts %}
          <tr class="gradeA odd" role="row">
            <td>{{ host.id }}</td>
            <td>{{ host.IP }}</td>
            <td>{{ host.status }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
buweilv
  • 451
  • 1
  • 4
  • 18
  • Can you please be more specific? Which buttons are you talking about? – boomcode Dec 20 '16 at 09:13
  • For example, I want to have a button named DEL to delete the hosts I selected.(So I want to post the selected host.id the server side to perform ajax operations, when the host data are deleted in the database, return json to the browser side to delete these rows) – buweilv Dec 20 '16 at 09:17

0 Answers0