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

问题

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.

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

Hope that helps !

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

回答2:

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

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

回答3:

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

回答4:

"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

回答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

回答6:

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

回答7:

sDom: "Tfrtip" or via a callback:

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

回答8:

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

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

回答9:

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

回答10:

Add this option:

"bInfo": false

回答11:

You can try this also.

simply hide it from CSS by using,

 .dataTables_length {
        display: none;
    }

Both will work.

回答12:

Just write :

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

回答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.

来源：https://stackoverflow.com/questions/13290626/datatable-hide-the-show-entries-dropdown-but-keep-the-search-box

标签

datatable