使用 select 選項過濾數據表在 php ajax 中不起作用

Question

我有多個 select 選項過濾基於數據表中的 ajax jquery php。 它正在正確過濾記錄，但在更改 select 選項過濾后，會顯示一條警報消息，並且在底部計數顯示不正確。

筆記：-

(1)數據表下方的計數顯示不正確。

(2) 顯示一條警告消息。

這是帶有記錄和 Select 選項過濾器的數據表。

在 select select 選項之后，將顯示一個錯誤警報消息。

選擇 select 選項過濾器后完成但底部計數錯誤。

HTML 代碼：-

<div class="col-md-12">
<form name="search_form" id="search_form" method="POST"> 
          
 <div class="col-md-3">
                <div class="formrow">
                  <select class="form-control select_filter" name="job_title" >
                    <option value ='' disabled selected>Job Title</option>
                    <option>PHP Developer</option>
                    <option>Android Developer</option>
                  </select>
                </div>
              </div>
              
  <div class="col-md-3">
                <div class="formrow">
                  <select class="form-control select_filter" name="emp_status" >
                    <option value ='' disabled selected>Employment Status</option>
                    <option>Permanant</option>
                    <option>Contract</option>
                    <option>Freelance</option>
                  </select>
                </div>
              </div>
              
                      
          
         
     <div class="col-md-3">
                <div class="formrow">
                  <select class="form-control select_filter" name="experience" >
                    <option value ='' disabled selected>Experience</option>
                    <option>Fresher</option>
                    <option>1 Year</option>
                    <option>2 Years</option>
                    <option>3 Years</option>
                    <option>4 Years</option>
                    <option>5 Years</option>
                    <option>6 Years</option>
                    <option>7 Years</option>
                    <option>8 Years</option>
                    <option>9 Years</option>
                    <option>10 Years</option>
                  </select>
                </div>
              </div>
</form>
 </div>


        
    
      <div class="row">
      <div class="col-xs-12">
          <div class="box box-danger">
            <div class="box-body table-responsive">
              <table id="example" class="table-bordered table-striped table-hover">
                <thead>
                <tr>
                  <th>S.No</th>
                  <th>Company name</th>
                 <th>Company email</th>
                  <th>Company mobile</th>
                    <th>Company address</th>
                     <th>Job title</th>
                      <th>Industry</th>
                       <th>Salary</th>
                        <th>Employment Type</th>
                         <th>No. Of Positions</th>
                          <th>Experience</th>
                     <th>Job Description</th>
                 <th>Status</th>
                  <th>Action</th>
                </tr>
                </thead>
                <tbody id="projects">
  </tbody>
</table>
</div>
 </div>
</div>
 </div>

ajaxCompany_search.php

<?php
include('../../config.php');
print_r($_POST);
?>

jQuery / Ajax 代碼：-

 <script type="text/javascript" rel="stylesheet">
 $(document).ready(function(){

 $('.select_filter').on('change',function(){
       
      $.ajax({
           type: "POST",
           url: "ajaxCompany_search.php",
           data: $('#search_form').serialize(), // You will get all the select data..
            success:function(data){
    
         var data = $(data);
         datatable.clear().rows.add(data).draw();
             
    }
        });
  });
  });

  
      var datatable = $('#example').DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'pdf', 'print'
    ]
  });

Answer 1

您的 data.table 在添加 ajax 響應中的 HTML 時未綁定，您必須刪除 data.table js 並將其重新分配給選擇器，然后它將正常工作。 或者在頁面 ajax 發送響應時使用 data.table 選擇器創建整個表，然后用您當前的 HTML 替換整個表。

從這里獲取參考https://datatables.net/reference/option/ajax