"rows per page selection field" on browse forms for selection by the user

[Andrea]

Hi all,

is it possible to have a "rows per page selection field" on browse forms for selection by the user?
I tried but can't find the right place to start with code.

Many thanks in anticipation.

Andrea

[kev1n]

Hi Andrea,

Do you mean a filter where the user can set the number of rows per page?

[Andrea]

Hi kev1n,

yes, this would be great!

Best wishes

Andrea

[kev1n]

In the form's Custom Code (Browse), add this JS to add a select element on top of a Browse Screen:

Code: Select all

function addRowsPerPageFilter(id) {

    const data = [10, 20, 30, 50, 70, 100];
    const hk = 'ROWS_PER_PAGE';
    const style = 'margin-left: 20px; width: 120px; height: 22px; text-align: left';

    var obj = $('<select style="' + style + '" id="' + id + '" />');

    obj.append($('<option>', {
        value: '',
        text: nuTranslate('Number of Rows'),
        disabled: true,
        selected: true
    }))


    for (let val in data) {
        $("<option />", {
            value: data[val],
            text: data[val]
        }).appendTo(obj);
    }

    $('#nuActionHolder').append(obj);

    obj.on("change", function() {
        nuSetProperty(hk, this.value);
        nuSetProperty('page_number', 0);
        nuSetProperty(hk, this.value);
        nuSearchAction();
    });

    $('#' + id).val(nuGetProperty(hk) === undefined ? '' : nuGetProperty('ROWS_PER_PAGE'));

}

addRowsPerPageFilter('rppselectId');

You will need to replace nuform.php in the /core directory.

nuform.zip

[kev1n]

I just updated the js again.

[Andrea]

Hi Kev1n,

this is wonderful! Many thanks!!! This feature is very useful
I made some little changes in the js to prepend the select box and show the default number of rows, so I can reduce width of the select box:

Code: Select all

function addRowsPerPageFilter(id) {

    const data = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
    const hk = 'ROWS_PER_PAGE';
    const style = 'margin-left: 20px; width: 50px; height: 22px; text-align: left';

    var obj = $('<select style="' + style + '" id="' + id + '" />');

    obj.append($('<option>', {
        value: '',
//        text: nuTranslate('Number of Rows'),
        text: nuGetProperty('rows'),
        disabled: true,
        selected: true
    }))


    for (let val in data) {
        $("<option />", {
            value: data[val],
            text: data[val]
        }).appendTo(obj);
    }

 //   $('#nuActionHolder').append(obj);
    $('#nuActionHolder').prepend(obj);

    obj.on("change", function() {
        nuSetProperty(hk, this.value);
        nuSetProperty('page_number', 0);
        nuSetProperty(hk, this.value);
        nuSearchAction();
    });

    $('#' + id).val(nuGetProperty(hk) === undefined ? '' : nuGetProperty('ROWS_PER_PAGE'));

}

I call it in "setup code" :

Code: Select all

function nuOnLoad() {

    if (nuFormType() == 'edit') {
        // Edit Form loaded
    } else
    if (nuFormType() == 'browse') {
        // Browse Form loaded
        
        addRowsPerPageFilter('rppselectId');
        ...

You had a lot of work in nuform.php! Will this nuform.php be part of future releases from now on?

Thanks a lot for this wonderful feature!

Have a nice weekend &
Best wishes

Andrea

[kev1n]

Yes, the nuform.php change is already on Github.

[Andrea]

Thank you!!!

Best wishes

Andrea