jQuery datatables пользовательская форма поиска

Я создаю в jQuery datatables пользовательскую форму поиска.Форма содержит входные данные, флажки, селекторы. Но не публикует никаких данных. Я попробовал несколько методов, но не преуспел.

$('#search-form').on('submit', function () {
    var datas = $(this).serializeArray();

    $.each( datas, function( i, data ) {

      table.columns(i).search(data.value).draw();

    });
});
Gökhan YILDIZ, в 12:24 (источник)

1 ответ

  1. На самом деле вам не нужно отправлять какую-либо форму, просто используйте кнопку по щелчку. Посмотрите на мое решение ниже, нажмите на кнопку фильтра, чтобы развернуть поле ввода, затем попробуйте ввести что-то и нажмите кнопку поиска. После этого datatable будет повторно рисовать.

    Код само-объяснительный, дайте мне знать, если вам нужны дальнейшие пояснения.

    $("#filter-button").click(function() {
  $(this).toggleClass("active");
  $('#filter-body').slideToggle(100);
});

$("#btnSearch").click(function(e){
  var table = $('#custTable').DataTable();
  var txtCustName = $("#txtCustName").val();
  var txtIntroducer = $("#txtIntroducer").val();
  var txtNRIC = $("#txtNRIC").val();
  var txtNickName = $("#txtNickName").val();
  var txtAddress = $("#txtAddress").val();
  var txtPhone = $("#txtPhone").val();
  var txtRemark = $("#txtRemark").val();

  table
    .columns(1).search(txtCustName)
    .columns(2).search(txtIntroducer)
    .columns(3).search(txtNRIC)
    .columns(4).search(txtNickName)
    .columns(5).search(txtAddress)
    .columns(6).search(txtPhone)
    .columns(7).search(txtRemark)
    .draw();
});

$('#custTable').DataTable({
  responsive: {
    details: {
      type: 'column',
      target: 'tr'
    }
  },
  columnDefs: [
  {
    className: 'control',
    orderable: false,
    targets:   0
  }],
  "dom": 'iti',
  iDisplayLength: -1
});

$('#custTable thead th:first-child').css({'background-image':'none'});

$("#custTable a.cust_id").on('click', function(event){
  event.stopPropagation();
});
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/responsive/2.2.0/js/dataTables.responsive.min.js"></script>
<link href="https://cdn.datatables.net/responsive/2.2.0/css/responsive.dataTables.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<div class="filter-container">
<button class="accordion" id="filter-button" data-toggle="collapse" data-parent="#accordion">Filter Customer</button>

<div id="filter-body" class="panel-collapse collapse">
<div class="panel-body filter-body">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3" style="text-align:initial;">
<div class="filter-group">
<label for="txtCustName">Name</label>
<input type="text" id="txtCustName">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3" style="text-align:initial;">
<div class="filter-group">
<label for="txtIntroducer">Introducer</label>
<input type="text" id="txtIntroducer">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3" style="text-align:initial;">
<div class="filter-group">
<label for="txtNRIC">NRIC</label>
<input type="text" id="txtNRIC">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3" style="text-align:initial;">
<div class="filter-group">
<label for="txtNickName">Nick Name</label>
<input type="text" id="txtNickName">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3" style="text-align:initial;">
<div class="filter-group">
<label for="txtAddress">Address</label>
<input type="text" id="txtAddress">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3" style="text-align:initial;">
<div class="filter-group">
<label for="txtPhone">Phone</label>
<input type="text" id="txtPhone">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3" style="text-align:initial;">
<div class="filter-group">
<label for="txtRemark">Remark</label>
<input type="text" id="txtRemark">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="text-align:initial;">
<div class="filter-group">
<button class="btn btn-success" id="btnSearch"><i class="mdi mdi-filter-outline"></i> Search</button>
</div>
</div>
</div>
</div>
</div>

<table id="custTable" class="table table-striped table-bordered table-hover dataTable no-footer dtr-column" cellspacing="0" width="100%" aria-describedby="custTable_info" role="grid" style="width: 100%;"><thead>
<tr role="row"><th class="control sorting_asc" rowspan="1" colspan="1" style="width: 13px; display: none; background-image: none;" aria-label=""></th><th class="sorting" tabindex="0" aria-controls="custTable" rowspan="1" colspan="1" style="width: 74px;" aria-label="Name: activate to sort column ascending">Name</th><th class="sorting" tabindex="0" aria-controls="custTable" rowspan="1" colspan="1" style="width: 121px;" aria-label="Introducer: activate to sort column ascending">Introducer</th><th class="sorting" tabindex="0" aria-controls="custTable" rowspan="1" colspan="1" style="width: 67px;" aria-label="NRIC: activate to sort column ascending">NRIC</th><th class="sorting" tabindex="0" aria-controls="custTable" rowspan="1" colspan="1" style="width: 124px;" aria-label="Nick Name: activate to sort column ascending">Nick Name</th><th class="sorting" tabindex="0" aria-controls="custTable" rowspan="1" colspan="1" style="width: 101px;" aria-label="Address: activate to sort column ascending">Address</th><th class="sorting" tabindex="0" aria-controls="custTable" rowspan="1" colspan="1" style="width: 79px;" aria-label="Phone: activate to sort column ascending">Phone</th><th class="sorting" tabindex="0" aria-controls="custTable" rowspan="1" colspan="1" style="width: 93px;" aria-label="Remark: activate to sort column ascending">Remark</th><th class="sorting" tabindex="0" aria-controls="custTable" rowspan="1" colspan="1" style="width: 94px;" aria-label="Actions: activate to sort column ascending">Actions</th></tr>
</thead><tbody><tr role="row" class="odd">
<td class="control sorting_1" style="display: none;"></td>
<td><a class="cust_id" href="customer-detail.php?id=27">abed</a></td>
<td>abba</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="" class="btnDelete" id="27"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td>
</tr><tr role="row" class="even">
<td class="control sorting_1" style="display: none;"></td>
<td><a class="cust_id" href="customer-detail.php?id=28">accure</a></td>
<td>abandon</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="" class="btnDelete" id="28"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td>
</tr><tr role="row" class="odd">
<td class="control sorting_1" style="display: none;"></td>
<td><a class="cust_id" href="customer-detail.php?id=29">async</a></td>
<td>acura</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="" class="btnDelete" id="29"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td>
</tr><tr role="row" class="even">
<td class="control sorting_1" style="display: none;"></td>
<td><a class="cust_id" href="customer-detail.php?id=30">bbb</a></td>
<td>brazil</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="" class="btnDelete" id="30"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td>
</tr><tr role="row" class="odd">
<td class="control sorting_1" style="display: none;"></td>
<td><a class="cust_id" href="customer-detail.php?id=20">john</a></td>
<td>alan</td>
<td>1234</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="" class="btnDelete" id="20"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td>
</tr><tr role="row" class="even">
<td class="control sorting_1" style="display: none;"></td>
<td><a class="cust_id" href="customer-detail.php?id=26">pencil</a></td>
<td>taylor</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="" class="btnDelete" id="26"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td>
</tr><tr role="row" class="odd">
<td class="control sorting_1" style="display: none;"></td>
<td><a class="cust_id" href="customer-detail.php?id=21">steve</a></td>
<td>alan</td>
<td>123321</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="" class="btnDelete" id="21"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td>
</tr><tr role="row" class="even">
<td class="control sorting_1" style="display: none;"></td>
<td><a class="cust_id" href="customer-detail.php?id=25">taylor</a></td>
<td>zayn</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="" class="btnDelete" id="25"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td>
</tr><tr role="row" class="odd">
<td class="control sorting_1" style="display: none;"></td>
<td><a class="cust_id" href="customer-detail.php?id=24">zack bro</a></td>
<td>zack</td>
<td>123131</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><a href="" class="btnDelete" id="24"><i class="fa fa-trash-o fa-2x" aria-hidden="true"></i></a></td>
</tr></tbody></table>