CODEWITHSUNDEEP
datatables
Rahul Talar
Rahul Talar

Reputation: 314

JQuery Datatables disable/remove row count options depending on number of records

By default, datatables has 4 sizes of records to show: 10,25,50,100. All the option are available by default no matter how many records in table.

If table has 18 entries is there any option to disable or remove 50 and 100 from the dropdown. or if disable row count if records are less than 10.

I can't find either of these in the documentation.

Upvotes: 2

Views: 5294

Answers (2)

Paco
Paco

Reputation: 666

You may be looking for this option, used in the constructor? https://datatables.net/reference/option/lengthChange

In which case, simply add:

$("#example_dialog").DataTable({
  "lengthChange": false,
});

To change the specific menu items, use the lengthMenu option in the constructor: https://datatables.net/reference/option/lengthMenu

While the DataTables plugin is quite useful, its documentation is arguably poor: "ornate, but smug" might be a good description.

In most cases, they list a few examples up front, then bury details behind several links and with poorly phrased descriptions on how to find further info. Also, their formatting choices in these docs are absurdly wretched for people with visual impairments.

Upvotes: 0

davidkonrad
davidkonrad

Reputation: 85538

You modify the length menu by the aLengthMenu setting

$('#example').dataTable({
   aLengthMenu : [5, 10, 25, 50]
});

To dynamically change the menu, you must access the generated <select> box in code. It has a name, which always is table id + _length, so a table with the id example will have a length menu with the name example_length

Here an example, dynamically changing the length menu to hold 5 and 10 only

var dataTable = $('#example').dataTable();
var newLength = [5, 10];
var aLengthMenu = $('select[name=example_length]');
$(aLengthMenu).find('option').remove();
for (var i=0;i<newLength.length;i++) {
  $(aLengthMenu).append('<option value="'+newLength[i]+'">'+newLength[i]+'</option>');
}

To disable the menu, simply add the disabled attribute

$(aLengthMenu).prop('disabled', 'disabled');

working demo with the code above http://jsfiddle.net/Mz5WZ/

Upvotes: 1

Related Questions