pageLength option doesn't work

pss9204

I am facing difficulty trying to change the default page length of my datatable, though it should be a difficult thing to implement. Can someone please help me.

The datatable that i am using is as below:

$('.example_table').DataTable({
keys: true,
stateSave: true,
ajax: "/crm/resources/contact/organisations",
"deferRender": true,
columns: [
{
"data": null,
render: function ( data, type, row ) {
if ( type === 'display' ) {
return '<input value="' + $('<div/>').text(data.id).html() + '" type="checkbox" class="editor-active organisation-datatable-checkbox">';
}
return data;
},
className: "dt-body-center"
},
{ "data": "name", "defaultContent": "-"},
{ "data": "business_detail.verticals.0.name", "defaultContent": "-"},
{ "data": "description", "defaultContent": "-"},
{ "data": "contact_detail.emails.0.address", "defaultContent": "-"},
{ "data": "contact_detail.phones.0.number", "defaultContent": "-"}
],
"order": [[1, 'asc']],
"columnDefs": [
{ "targets": 'no-sort', "orderable": false},
{ "width": "5%", "targets": 0},
{ "width": "20%", "targets": 1},
{ "width": "15%", "targets": 2},
{ "width": "20%", "targets": 3},
{ "width": "20%", "targets": 4},
{ "width": "20%", "targets": 5},
{ className: "text-left", "targets": [1, 2, 3, 4, 5] }
],
responsive: true,
bPaginate: true,
bLengthChange: false,
pageLength: 12,
bInfo: false,
dom: '<"html5buttons"B>lTfgitp',

        buttons: [
                /*
            {extend: 'copy'},
            {extend: 'csv'},
            {extend: 'excel', title: 'Organisation_Contacts'},
            {extend: 'pdf', title: 'Organisation_Contacts'},

            {extend: 'print',
                customize: function (win){
                    $(win.document.body).addClass('white-bg');
                    $(win.document.body).css('font-size', '10px');

                    $(win.document.body).find('table')
                    .addClass('compact')
                    .css('font-size', 'inherit');
                }
            }
            */
        ]

    });

kthorngren

pageLength: 12, should result in 12 rows. Are you saying that you don't see 12 rows displayed?

Do you see errors in your browser's console?

I don't see anything that would cause it to not show 12 rows. Please provide a link showing the issue.

Kevin

bsuk

Did you override it in the HTML for the table?

<table data-page-length='10' cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="whatever" width="100%">

If so, this will override the pagelength setting in the JS.

BSUK

jeffz

This setting you have:
stateSave: true,
sets previous rows per page selection to LocalStorage JSON as 'length' and that setting seems to override pageLength.
This is what came out of my testing.