DataTable: Hide the Show Entries dropdown but keep the Search box

Question

Is it possible to hide the Show Entries dropdown but keep the Search box in DataTable? I want to always display 10 rows with pagination at the bottom along with search box but do not want to display the Show entries dropdown.

Farflung

Answer 1

You can find more information directly on this link: http://datatables.net/examples/basic_init/filter_only.html

$(document).ready(function() {
$('#example').dataTable({
    "bPaginate": false,
    "bLengthChange": false,
    "bFilter": true,
    "bInfo": false,
    "bAutoWidth": false });
});

EDIT : If you are lazy, "bLengthChange": false, is the one you need to change :)

Speck

Answer 2

If using Datatable > 1.1.0 then lengthChange option is what you need as below :

$('#example').dataTable( {
  "lengthChange": false
});

Creeps

Yes, documented here: datatables.net/reference/option/lengthChange – Viperish

Answer 3

"searching": false,   // Search Box will Be Disabled

"ordering": false,    // Ordering (Sorting on Each Column)will Be Disabled

"info": true,         // Will show "1 to n of n entries" Text at bottom

"lengthChange": false // Will Disabled Record number per page

Ogdon

Answer 4

This is key answer to this post "bLengthChange": false, will hide the Entries Dropdown

Italianate

Answer 5

I solve it like that. Use bootstrap 4

    $(document).ready(function () {
        $('#table').DataTable({
            "searching": false,
            "paging": false,
            "info": false
        });
    });

cdn js:

• https://code.jquery.com/jquery-3.3.1.min.js
• https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js
• https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js
• https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js

cdn css:

• https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css
• https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css

Ardath

This works for datatables in 2018, none of the other did. – Staunch

Answer 6

Just write :

  $(document).ready( function () {
        $('#example').dataTable( {
          "lengthChange": false
        } );
    } );

Forestaysail

Answer 7

For DataTables <=1.9, @perpo's answer

$('#example').dataTable({
    "bLengthChange": false
});

works fine, but for 1.10+ try this:

$('#example').dataTable({
    "dom": 'ftipr'
}); 

where we have left out l the "length changing input control"

1.9 Docs

1.10 Docs

Umbrian

this is better because it remove the div holdint the element . with bLenghChange element is gone but there is whitespace . thanks ! – Simas

Answer 8

sDom: "Tfrtip" or via a callback:

"fnHeaderCallback": function(){
    $('#YOURTABLENAME-table_length').hide();
}

Dismissal

Answer 9

To disable the "Show Entries" label, add the code dom: 'Bfrtip' or you can add "bInfo": false

$('#example').DataTable({
    dom: 'Bfrtip'
})

Balloon

Answer 10

You can try this also.

simply hide it from CSS by using,

 .dataTables_length {
        display: none;
    }

Both will work.

Kinsley

Answer 11

Add this option:

"bInfo": false

Thorncombe

Answer 12

To hide "show entries" but still have pagination. I used the code below and it worked.

"bPaginate": true,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false

Peradventure

Answer 13

To disable the "Show Entries" label, use "bInfo", example: "bFilter" is the search component, but are active by default.

$(document).ready( function () {
  $('#example').dataTable( {
    "bInfo": false
  } );
} );

Enable or disable the table information display. This shows information about the data that is currently visible on the page, including information about filtered data if that action is being performed.

Negris

Answer 14

If you're using Angular you can use the following code to do the same.

in component.html

<table id="" datatable [dtOptions]="dtOptions" class="table dataTable">

and in your component.ts

 dtOptions: any = {}


 this.dtOptions = {
  searching: true,    //enables the search bar
  info: false        //disables the entry information
}

there more option for data table available please visit here to learn more

Nappe

Answer 15

for specific pages i suggest you use pure css --

.dataTables_filter, .dataTables_info, .dataTables_paginate, .dataTables_length 
    { 
     display: none;
    }

The above code will hide everything.

Mansfield

Answer 16

Remove the top info bar

$(".dataTables_info").eq(0).parent().parent().remove()

Dorolice