Row Length Menu

niksa.blonder

Does Datatables Editor edition have option for changing the number of rows in an editable datatable? Specifically something like lengthMenu: [10, 25, 50, -1] does not seem to exist.

kthorngren

The datatable docs show a config property that can be used to set the Datatable options like lengthMenu.

Kevin

allan

Interestingly I've ready your question a little differently from Kevin - I'm wondering if you want to have a length menu in a Editor based table (where the length menu is replaced by the Buttons in many cases). If so, have a look at this FAQ.

What to remember here is that Editor is an addon to DataTables. You can configure the DataTable as normal, and Editor is effectively a layer on top of that.

Apologies if I've misunderstood as you are talking about the datatable field type.

Allan

niksa.blonder

Hi Allan and Kevin,

what I mean is this - Let's take this as an example code

new DataTable('#myTable', {
lengthMenu: [10, 25, 50, 75, 100]
});

In regular datatables this would give a drop-down that says Show [10, 25, 50, 75, 100] entries.

However when creating a table that is using Editor layer that menu is non existent. The default seems to be a table with 10 rows with no option to change. Looking at the examples on your editor pages I'm not seeing any of the tables that allow for changing number of rows that table displays when using editor layer.

allan

Can you show me the initialisation you are using for your Editor table please?

If it is something like this example you would do:

new DataTable('#example', {
    ajax: '../php/staff.php',
    columns: [
        {
            data: null,
            render: (data) => data.first_name + ' ' + data.last_name
        },
        { data: 'position' },
        { data: 'office' },
        { data: 'extn' },
        { data: 'start_date' },
        { data: 'salary', render: DataTable.render.number(null, null, 0, '$') }
    ],
    layout: {
        topStart: [
           'pageLength',
           {
                buttons: [
                    { extend: 'create', editor: editor },
                    { extend: 'edit', editor: editor },
                    { extend: 'remove', editor: editor }
                ]
           }
        }
    },
    select: true
});

Or add the pageLength button to the buttons array:

new DataTable('#example', {
    ajax: '../php/staff.php',
    columns: [
        {
            data: null,
            render: (data) => data.first_name + ' ' + data.last_name
        },
        { data: 'position' },
        { data: 'office' },
        { data: 'extn' },
        { data: 'start_date' },
        { data: 'salary', render: DataTable.render.number(null, null, 0, '$') }
    ],
    layout: {
        topStart: {
            buttons: [
                { extend: 'create', editor: editor },
                { extend: 'edit', editor: editor },
                { extend: 'remove', editor: editor },
                { extend: 'pageLength' }
            ]
        }
    },
    select: true
});

This goes back to my point that an Editor based DataTable is still just a DataTable. The regular initialisation I use in a lot of the Editor examples replaces the page length change option with buttons, but it can readily be put back in!

Allan

kthorngren

As Allan said I misunderstood your question. The answer is in the FAQ Allan linked to . Here is a running example with your lengthMenu setting:
https://live.datatables.net/vibovasu/1/edit

If you don't want the button but want the select list then add the pageLength parameter back using the layout option.

Kevin