How to show pagination dropdown on the suitelet sublist?

I have developed suitelet script to select a values from multiselect type field and show results in a sublsit. Currently my script shows all results on same page. How to show pagination dropdown inside the sublist at to right corner. Please advice Thank you!

Below suitelet script shows pagination dropdown on the form above sublist.

function onRequest(context) {
    var form = serverWidget.createForm({
        title: 'Select Numbers'
    });

    var multiselectField = form.addField({
        id: 'custpage_numbers',
        type: serverWidget.FieldType.MULTISELECT,
        label: 'Select Numbers'
    });

    form.addSubmitButton({
        label: 'Submit'
    });

    // Add pagination dropdown
    var rowsField = form.addField({
        id: 'custpage_rows',
        type: serverWidget.FieldType.SELECT,
        label: 'View Row Numbers'
    });

    rowsField.addSelectOption({
        value: '10',
        text: '1 to 10'
    });

    rowsField.addSelectOption({
        value: '20',
        text: '11 to 20'
    });

    rowsField.addSelectOption({
        value: '30',
        text: '21 to 30'
    });
}

Previously I tried to add pagination option to one of my Script which I created just for fun.

Basically what you need to do is:

1. A sublist showing 10 records per page

2. A dropdown to choose the page

3. A client script that reloads the Suitelet with the selected page

Suitelet:

/**
 * @NApiVersion 2.1
 * @NScriptType Suitelet
 */
define(['N/ui/serverWidget', 'N/search', 'N/runtime'], function (ui, search, runtime) {

    const PAGE_SIZE = 10;

    function onRequest(context) {
        if (context.request.method === 'GET') {
            let form = ui.createForm({ title: 'Sublist with Pagination' });

            let page = parseInt(context.request.parameters.page) || 1;

            let pageField = form.addField({
                id: 'custpage_page_select',
                type: ui.FieldType.SELECT,
                label: 'Page'
            }).updateLayoutType({
                layoutType: ui.FieldLayoutType.OUTSIDEABOVE
            });

            let itemSearch = search.create({
                type: search.Type.ITEM,
                columns: ['internalid', 'itemid', 'type']
            });

            let searchResultSet = itemSearch.run();
            let allResults = searchResultSet.getRange({ start: 0, end: 1000 });

            let totalRecords = allResults.length;
            let totalPages = Math.ceil(totalRecords / PAGE_SIZE);

            for (let i = 1; i <= totalPages; i++) {
                pageField.addSelectOption({
                    value: i.toString(),
                    text: 'Page ' + i,
                    isSelected: (i === page)
                });
            }

            let sublist = form.addSublist({
                id: 'custpage_item_sublist',
                label: 'Items',
                type: ui.SublistType.INLINEEDITOR
            });

            sublist.addField({
                id: 'custpage_col_id',
                label: 'ID',
                type: ui.FieldType.TEXT
            });
            sublist.addField({
                id: 'custpage_col_name',
                label: 'Name',
                type: ui.FieldType.TEXT
            });
            sublist.addField({
                id: 'custpage_col_type',
                label: 'Type',
                type: ui.FieldType.TEXT
            });

            let startIdx = (page - 1) * PAGE_SIZE;
            let endIdx = Math.min(startIdx + PAGE_SIZE, totalRecords);

            for (let i = startIdx; i < endIdx; i++) {
                let result = allResults[i];
                sublist.setSublistValue({
                    id: 'custpage_col_id',
                    line: i - startIdx,
                    value: result.getValue('internalid').toString()
                });
                sublist.setSublistValue({
                    id: 'custpage_col_name',
                    line: i - startIdx,
                    value: result.getValue('itemid')
                });
                sublist.setSublistValue({
                    id: 'custpage_col_type',
                    line: i - startIdx,
                    value: result.getText('type')
                });
            }

            form.clientScriptModulePath = './Pagination_CS.js';

            context.response.writePage(form);

        } else if (context.request.method === 'POST') {
            
        }
    }

    return { onRequest };
});

Client Script:

/**
 * @NApiVersion 2.1
 * @NScriptType ClientScript
 */
define(['N/url'], function(url) {
    function fieldChanged(context) {
        if (context.fieldId === 'custpage_page_select') {
            var page = context.currentRecord.getValue({ fieldId: 'custpage_page_select' });
            
            var suiteletUrl = url.resolveScript({
                scriptId: 'customscript_pagination_stlt',
                deploymentId: 'customdeploy_pagination_stlt',
                params: {
                    page: page
                }
            });
            log.debug({
                title: "suiteletUrl",
                details: suiteletUrl
            });

                
            window.open(suiteletUrl, '_self', false);

        }
    }

    return {
        fieldChanged: fieldChanged
    };
});

Notes:

Above example fetches a maximum of 1000 records (getRange). If you need more, you should implement proper search pagination (search.runPaged()).