_TOTAL_ token not displaying the number of records in datatable

Question

I am trying to use datatables and i want to display the total number of records in the top left where i have the option to change the number of rows

my code for datatable is as below:

tableT= $('#empDataTable').DataTable({


         "language": {
             "lengthMenu": "Show _MENU_  of _TOTAL_ entries"
            // "zeroRecords": "Nothing found - sorry",
           //  "info": "Showing page _PAGE_ of _PAGES_",
           //  "infoEmpty": "No records available",
           //  "infoFiltered": "(filtered from _MAX_ total records)"
         },

//          fixedHeader: true,
        scrollY: 300,
        scrollX : false,
        deferRender: true,
        scrollCollapse: true,
        scroller: false,
        mark: true,
        columnDefs: [

                    { type: 'date-dd-mmm-yyyy', targets: 5 }

                    ],
    dom: 'lfrtBp',
    buttons: [
    { extend: 'excel', text: 'Export to Excel',className:'btn btn-primary btn-xs',
        exportOptions: {
                columns: [ 0,1,2,3,4,5,6,7 ]
            }

    }

    ]

     }
     );

But for some reason i am not able to display/evaluate the _TOTAL_. Documentation

I want to display the _MENU_ and _TOTAL_ together in lengthMenu so that the user understands at a glance that in total how many entries are there and how many records are shown

Can anybody help me?

Answer 1

Try this one:

$('#empDataTable').dataTable( {
  "language": {
    "info": "Show _TOTAL_ entries",
    "lengthMenu": "Display _MENU_ records"
  }
} );

Answer 2

Try using DataTable's dom option.

$('#empDataTable').DataTable({
  // "dom": "<'row'<'col-sm-6'l><'col-sm-6'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'p>>",
  "dom": "<'row'<'col-sm-6'li><'col-sm-6 hidden-xs'f>><'row'<'col-sm-12'tr>><'row'<'col-sm-5'i><'col-sm-7'p>>",
});

l -> li = length + Table info(total count)

https://datatables.net/reference/option/dom

This is css to merge into one line.

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info {
    display: inline-block;
}

.dataTables_wrapper .dataTables_length + .dataTables_info {
    padding-left: 10px;
}