数据表自定义过滤器不起作用

时间:2017-07-05 14:29:32

标签: javascript jquery

我有下一个表,有这个数据表配置:

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>

基本上,事件必须从form-filter类输入中获取值  并使用它来使用ajax请求过滤数据表。

但不起作用。

有人可以帮忙吗?

0 个答案:

没有答案