使用select选项进行数据表过滤在php ajax中不起作用 [英] Datatable filtering with select option is not working in php ajax

问题描述

我在datatable中基于ajax jquery php进行了多个选择选项过滤.它可以正确过滤记录，但更改选择选项后，将显示一条警报消息&；底部计数显示不正确.

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.

注意:-

(1)数据表下方的计数显示不正确.

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

(2)显示一条警报消息.

(2) one alert message is shown.

这是具有记录&选择选项过滤器.

选择选项后，将显示一条错误警报消息.

选择选择选项过滤器后，操作完成，但底部计数错误.

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'
    ]
  });

推荐答案

在从ajax响应中添加HTML时，您的数据表未绑定，您必须删除数据表js并将其重新分配给选择器，然后它将正常工作.或使用ajax正在发送响应的页面上的数据表选择器创建整个表，然后将整个表替换为当前的HTML.

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.

从此处获取参考 https://datatables.net/reference/option/ajax

这篇关于使用select选项进行数据表过滤在php ajax中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！