Search code examples
ajaxdatatables

Datatables Buttons not Showing If I have an AJAX script running


I have this two block of codes below,

<script>
 $(function () {
    $("#example1").DataTable({
      "responsive": true, "lengthChange": false, "autoWidth": false,
      "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
    }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
    $('#example2').DataTable({
      "paging": true,
      "lengthChange": false,
      "searching": false,
      "ordering": true,
      "info": true,
      "autoWidth": false,
      "responsive": true,
    });
  });
</script>
<script>
function getdistrict(val) {
$.ajax({
type: "POST",
url: "ajaxfile.php",
data:'state_id='+val,
success: function(data){
$("#district-list").html(data);
}
});
}
</script>

If I remove the AJAX script the buttons appear but I need this script to work.


Solution

  • Newbie mistake of using an old jQuery API like this

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    

    instead of using this

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>