Problem with data tables, custom filter

0

I have the following table:

var grid = new Datatable();
grid.init({
  src: $("#datatable_cheques"),
  onError: function(grid) {
    toastr['error']('An error occurred while getting details list');
    $('div.loading').remove();
  },
  loadingMessage: 'Loading...',
  dataTable: {
    "pagingType": "bootstrap_number",
    "bInfo": false,
    "dom": '<"top"l>t<"bottom"p><"clear">Z',
    "bLengthChange": false,
    "pageLength": 50,
    "columnDefs": [{
      // Se definen las columnas por las que no se puede ordenar
      "orderable": false,
      "targets": [0, 12]
    }],
    "ajax": {
      "url": "/check/list",
      "data": {
        "_token": $("#_token").val()
      }
    },
    "order": [
      [10, "desc"]
    ]
  }
});

$("#filter_refresh").click(function() {
  grid.submitFilter();
});

$("#filter_id, #filter_status").keypress(function(e) {
  if (e.which == 13) {
    $(this).val();
    grid.submitFilter();
  }
});
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Datatables -->
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

<!-- HTML -->
<div class="table-container">
  <table class="table table-striped table-bordered table-hover" id="datatable_cheques">
    <thead>
      <tr role="row" class="heading">
        <th><input type="checkbox" id="sel-all" name="sel-all"></th>
        <th>ID</th>
        <th>Status</th>
        <th>Order #</th>
        <th>User</th>
        <th>Amount</th>
        <th>Recived</th>
        <th>Memo</th>
        <th>Cashier</th>
        <th>Number</th>
        <th>Date</th>
        <th>Time</th>
        <th>Actions</th>
      </tr>
      <tr role="row" class="filter">
        <td></td>
        <td><input name="id" id="filter_id" type="text" class="form-control form-filter input-sm"></td>
        <td><input name="status" id="filter_status" type="text" class="form-control form-filter input-sm"></td>
        <td colspan="9"></td>
        <td>
          <a class=" btn blue btn-outline sbold" href="javascript:;" id="filter_refresh"> <i class="fa fa-refresh"></i></a>
        </td>
      </tr>
      <tbody> </tbody>
  </table>
</div>

Basically the intention is to take the data from the fields with the class form-filter and use them to filter in the datatable.

However, this does not work, no matter how hard I try, it does not work.

Could someone guide me?

    
asked by Emmanuel Frias 05.07.2017 в 00:39
source

0 answers