Datatable headers missing after clicking filter button

Datatable headers missing after clicking filter button

wnswns Posts: 12Questions: 8Answers: 0

I made a datatable using yagra. However, every time I click the filter button, the header is now showing so I need to refresh the page back. Im not sure if its related to the filter button() or anything else.
I managed to filter it. However, when I clicked filter, my datatable headers are missing but I couldnt figure out what the problem is. My blade is:

<table id="table_data" class=" table-responsive table-striped table-hover table-bordered ">
                       <thead>
                           <tr>
                               <th scope="col">ID</th>
                               <th scope="col">First Name</th>
                               <th scope="col">Last Name</th>
                           </tr>
                       </thead>
               </table>

Filter function:

$('#filter').click(function(){
      var table = $('#table_data').DataTable();
      var name= $('#name').val();
      var age= $('#age').val();
      var gender= $('#gender').val();

      if( $.fn.DataTable.isDataTable('#table_data')){
            table.destroy();
            $('#table_data').empty();
            var dataTable = $('#table_data').DataTable({
            processing: false,
            serverSide: false,
            ajax:{
            url:'/filter-result',
            data:{name:name, age:age,gender:gender}
            },

            columns: [
                  {
                      data:'id',
                      name:'id'
                  },
                  {
                      data:'First_name',
                      name:'First_name'
                  },
                  {
                      data:'Last_name',
                      name:'Last_name'
                  }

              ]

          });


          }
    });

What is the reasons the header missing after clicked?

Answers

This discussion has been closed.