Datatable filtering with select option is not working in php ajax

Question

I have multiple select option filtering based on ajax jquery php in datatable. It is filtering the records correctly but after change on select option filtering one alert message is shown & at bottom counting showing not correct.

Note:-

(1)Count below the datatable is not showing correctly.

(2) one alert message is shown.

This is DataTable with records & Select option filter.

after select select option one error alert message is shown.

after selecting select option filter is done but bottom counting is wrong.

HTML Code:-

<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 Code:-

 <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

Your data.table is not binding while added the HTML from ajax response, you must m remove and reassign the data.table js to the selector then it will works fine. Or create the entire table with data.table selector on the page ajax is sending the response and then replace the entire table with your current HTML.

get a reference from here https://datatables.net/reference/option/ajax