Export to Excel Pdf is not working in Datatable after select option filter in php ajax

Question

我有多個 select 選項過濾基於 ajax jquery ZE1BFD762321E409CEEZ4AC0B6 in datatable。 它正在正確過濾記錄，但在 select 選項過濾更改后，但導出到 Excel Pdf 不起作用

筆記：-

(1)它總是下載excel & pdf中的10條記錄。

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