How can I use iDisplayLength with angular datatables?

Question

I have an angular datatable but I only want to show 5 rows of the table by default. I consulted the documetation and it said that the property I should modify is iDisplayLength. I tried doing it like this:

var vm = this;

vm.quotationsOptions = DTOptionsBuilder.newOptions().iDisplayLength = 5;

vm.quotationsCollumns = [
    DTColumnDefBuilder.newColumnDef(8), // Number
    DTColumnDefBuilder.newColumnDef(9), // Phase
    DTColumnDefBuilder.newColumnDef(10), // Reason
    DTColumnDefBuilder.newColumnDef(11)
];

but it didn't work. I'm a bit lost as to how to fix this because the angular datatables doesn't mention this and the examples of original databtable are too different. Does someone know how to fix this?

Answer 1

The above is not entirely correct. The suggested kind of notation should be :

vm.quotationsOptions = {
  iDisplayLength: 5
  //pageLength: 5 is the the same, 1.10.x naming
}

angular-dataTables have a helper method for this :

vm.quotationsOptions = DTOptionsBuilder.newOptions().withDisplayLength(5)

Is the same. Though this only sets the default number of visible rows per page. You can change the dropdown menu this way :

.withOption('lengthMenu', [ [5, 10, 15, -1], [5, 10, 15, "All"] ] )

demo -> http://plnkr.co/edit/YYg5D6MRkriCFtcRBNdR?p=preview