Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

datatable

dt

People also ask

How to remove show entries dropdown in dataTable?

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 } ); } );

How do I show only 5 records in a dataTable?

There is a option called pageLength . You can set this for show only 5 entries.


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 });
});

Hope that helps !

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


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

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

"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

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


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

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