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();

    });
});

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>