在 php ajax 中选择选项过滤器后，导出到 Excel Pdf 在数据表中不起作用

Question

我在数据表中有多个基于 ajax jquery php 的选择选项过滤。它正在正确过滤记录，但在选择选项过滤更改完成但导出到 Excel Pdf 不起作用

注意：-

(1)它总是下载10条记录在excel和pdf中。

(2)数据表下方的计数显示不正确。

$(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);
               alert(data);
         datatable.clear().rows.add(data).draw();
               $("#projects").html(data);

            }
        });
  });
  });


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

<link href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css"></link>
<link href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css"></link>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js"></script>


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

Answer 1

您是在表中直接追加新行，因此仅更新 tbody 数据而不是数据表插件本身。相反，您可以 clear 您的数据表，然后使用 draw() 方法再次绘制它。

演示代码：

$(document).ready(function() {
  var datatable = $('#example').DataTable({
    dom: 'Bfrtip',
    buttons: [
      'copy', 'csv', 'excel', 'pdf', 'print'
    ]
  });
  $('.select_filter').on('change', function() {
    /*$.ajax({
         
          success: function(data) {*/
    //use object arround your html adding around `$()`
    var data = $('<tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td></tr>')
    //clear datatble an add new datas 
    datatable.clear().rows.add(data).draw();

    /* }
    });*/
  });
});

<link rel='stylesheet' type='text/css' href='https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js"></script>
<select class="form-control select_filter" name="emptype">
  <option value='' disabled selected>Employment Status</option>
  <option>Permanent</option>
  <option>Contract</option>
  <option>Freelance</option>
</select>
<table id="example">
  <thead>

    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
    </tr>

  </thead>
  <tbody id="projects">
    <tr>
      <td>Row 1 Data 1</td>
      <td>Row 1 Data 2</td>
    </tr>
    <tr>
      <td>Row 2 Data 1</td>
      <td>Row 2 Data 2</td>
    </tr>
  </tbody>
</table>