Datatable doesnt return header and slow once click filter, cannot export all entries and and iTotalR

wns

I have a very large database which consists of 15 millions data. So, I play around the server-side script datatable plugins (pagination) to display the data into a table. As the data is too large, I want to display only 50 data before filter the data, so i added 'iTotalRecords' code in my ajax datatable , as you can see on my code below: However, there are few problems in my code.

1.The headers are missing after I click 'filter' button, so the system is lag and super slow

2.export function only export the selected entries (not all entries, for example the first 50 data for page 1 only)- I used dom in ajax

3.Before filter, the datatable displays all 15 millions data (iTotalRecords doesnt work)- I used iTotalRecords

Code below is the ajax for datatable that I used to solve above problems, but it doesnt work as what I wanted.

<script type="text/javascript">
  $(document).ready(function(){
      fill_datatable();

      function fill_datatable(age = '', ,carOwnership2='') 
    {
        var dataTable = $('#table_data').DataTable({
            processing: true,
            serverSide: true,
            fixedHeader: {
      header: true,
      "draw": 1,
      " iTotalRecords": 57,
      "iTotalDisplayRecords": 57,
    },
            dom:  "<'row'<'col-md-3'l><'col-md-5'B><'col-md-4'f>>" +
                  "<'row'<'col-md-12'tr>>" +
                  "<'row'<'col-md-5'i><'col-md-7'p>>",
            buttons: [

                { extend: 'colvis',   postfixButtons: [ 'colvisRestore' ] },
                { extend: 'copy', exportOptions:
                 { columns: [ 0, ':visible' ] }
            },
            {
                    extend: 'collection',
                    text: 'Export',
                    buttons: ['pdf','print',  'csv']
                }
              ],
              language: {
                  buttons: {
                      print: 'Print',
                      copy: 'Copy',
                      colvis: 'Column Visibility'
                   } //buttons
               }, //language
              "lengthMenu": [[50, 100, 150, -1], [50, 100, 150, "All"]],
            ajax:{
            url:'/filter-result',
            headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                       },
            data:{age:age, carOwnership2:carOwnership2}
            },

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

              ]

          });


      }


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

      if( $.fn.DataTable.isDataTable('#table_data')){
            table.destroy();
            $('#table_data').empty();

            fill_datatable(age, carOwnership2);


          }
    });

Im pretty sure I've used the functions in a correct way. However, not sure why I got those errors in datatable. Anyone knows what I should do to fix my code?

colin

FixedHeader is incorrectly configuration, only fixedHeader.header is a valid property:

            fixedHeader: {
      header: true,
      "draw": 1,
      " iTotalRecords": 57,
      "iTotalDisplayRecords": 57,
    },

2.export function only export the selected entries (not all entries, for example the first 50 data for page 1 only)- I used dom in ajax

Yep, the export only exports what's currently in the table. If you want to export all data from the server, these threads, here and here, should help.

For the other issues, we're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

wns

Thanks colin, its works for others. But do you know why " iTotalRecords": 57, doesnt work? I tried to display only 50 rows before filtering.

colin

It would just be ignored as it's not supported. If you want 50 rows returned, you can set pageLength to be 50, then that'll be what the client requests.

Colin