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.

score 350 · Accepted Answer · edited Dec 24 '22 at 09:23

350

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 :)

edited Dec 24 '22 at 09:23

starball

20,030
7
43
238

answered Mar 08 '13 at 02:06

PERPO

3,812
1
13
20

score 86 · Answer 2 · answered Oct 28 '16 at 18:40

86

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

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

answered Oct 28 '16 at 18:40

Jimmy Obonyo Abor

7,335
10
43
71

Yes, documented here: https://datatables.net/reference/option/lengthChange – Dr. Jan-Philip Gehrcke Mar 14 '23 at 17:33

score 49 · Answer 3 · edited Jun 29 '17 at 19:49

49

"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

edited Jun 29 '17 at 19:49

Peter Hall

53,120
14
139
204

answered Jun 27 '17 at 11:06

Niv

491
4
2

score 24 · Answer 4 · 2015-02-27T13:27:00.300

24

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

edited Feb 27 '15 at 13:27

answered Feb 10 '15 at 14:48

score 14 · Answer 5 · answered Oct 04 '18 at 16:54

I solve it like that. Use bootstrap 4

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

cdn js:

cdn css:

This works for datatables in 2018, none of the other did. – Adam Oct 18 '18 at 15:23 — Adam, Oct 18 '18 at 15:23

score 11 · Answer 6 · answered Apr 22 '19 at 07:08

11

Just write :

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

answered Apr 22 '19 at 07:08

proghasan

425
3
20

score 10 · Answer 7 · edited May 23 '17 at 11:47

10

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

edited May 23 '17 at 11:47

Community

1
1

answered May 19 '16 at 00:43

Michal Frystacky

1,418
21
38

1

this is better because it remove the div holdint the element . with bLenghChange element is gone but there is whitespace . thanks ! – Hamid Salari Jul 19 '20 at 22:17

score 8 · Answer 8 · edited Jun 29 '17 at 19:47

8

sDom: "Tfrtip" or via a callback:

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

edited Jun 29 '17 at 19:47

Peter Hall

53,120
14
139
204

answered Jan 09 '13 at 16:53

cnizzardini

1,196
1
13
29

score 7 · Answer 9 · edited Jun 29 '17 at 19:48

7

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

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

edited Jun 29 '17 at 19:48

Peter Hall

53,120
14
139
204

answered Jul 07 '16 at 10:39

chitranjan srivastva

71
1
2

score 5 · Answer 10 · answered Feb 09 '18 at 08:59

5

You can try this also.

simply hide it from CSS by using,

 .dataTables_length {
        display: none;
    }

Both will work.

answered Feb 09 '18 at 08:59

Rupesh Kamble

167
3
11

score 1 · Answer 11 · edited Jun 29 '17 at 19:47

1

Add this option:

"bInfo": false

edited Jun 29 '17 at 19:47

Peter Hall

53,120
14
139
204

answered Feb 03 '16 at 23:19

code-8

54,650
106
352
604

score 1 · Answer 12 · answered Mar 03 '16 at 16:15

1

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

answered Mar 03 '16 at 16:15

ejay56

41
7

score 0 · Answer 13 · answered Nov 25 '15 at 15:24

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.

score 0 · Answer 14 · answered Feb 25 '21 at 12:01

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

Atekelt Afework · Answer 15 · 2022-08-10T09:24:50.770

0

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.

edited Aug 10 '22 at 09:24

answered Aug 10 '22 at 08:46

Atekelt Afework

73
3
9

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

15 Answers15

Linked