Add more pagination in list view

I want to add more pagination in list view like 5000, 10000. How to do ?

Only update this line, it will effect automatically.

const paging_values = [10, 20, 50, 100, 250, 500, 1000, 2500, 5000];

Output:

Without core code changes how we can achieve?

Not possible!

I used and working fine.

frappe.listview_settings["Item"] = {
    onload: function(listview) {
        // Set default page length and initialize start parameter
        var pageLength = listview.page_length = 500;
        var start = 0;

        // Custom HTML for pagination controls
        var customHTML = `
            <div class="list-paging-area level">
                <div class="level-left">
                    <div class="btn-group">
                        <button type="button" class="btn btn-default btn-sm btn-paging" data-value="50">50</button>
                        <button type="button" class="btn btn-default btn-sm btn-paging" data-value="100">100</button>
                        <button type="button" class="btn btn-default btn-sm btn-paging" data-value="200">200</button>
                        <button type="button" class="btn btn-default btn-sm btn-paging" data-value="500">500</button>
                        <button type="button" class="btn btn-default btn-sm btn-paging" data-value="2500">2500</button>
                        <button type="button" class="btn btn-default btn-sm btn-paging" data-value="5000">5000</button>

                    </div>
                </div>
                <div class="level-right">
                    <div class="btn-group">
                        <button class="btn btn-default btn-prev-page btn-sm">Prev Page</button>
                        <button class="btn btn-default btn-next-page btn-sm">Next Page</button>
                    </div>
                </div>
            </div>
        `;

        // Replace the existing pagination controls with custom HTML
        $('.list-paging-area').replaceWith(customHTML);

        // Function to set the page length and refresh the list view
        function setPageLength(value) {
            pageLength = value;
            start = 0; // Reset start when page length changes
            listview.page_length = pageLength;
            listview.start = start;
            listview.refresh();
        }

        // Event listeners for pagination buttons
        $(document).on('click', '.btn-paging', function() {
            var value = $(this).data('value');
            setPageLength(value);

            // Highlight the selected button
            $('.btn-paging').removeClass('btn-info');
            $(this).addClass('btn-info');
        });

        // Event listener for Next Page button
        $(document).on('click', '.btn-next-page', function () {
            start += pageLength;
            listview.start = start;
            listview.page_length = pageLength;
            listview.refresh();
        });

        // Event listener for Prev Page button
        $(document).on('click', '.btn-prev-page', function() {
            start = Math.max(0, start - pageLength);
            listview.start = start;
            listview.page_length = pageLength;
            listview.refresh();
        });

        // Highlight the button corresponding to the initial page length
        $('.btn-paging[data-value="' + listview.page_length + '"]').addClass('btn-info');

        // Override the refresh method to include start and page length parameters
        var originalRefresh = listview.refresh;
        listview.refresh = function() {
            listview.data.start = start;
            listview.data.page_length = pageLength;

            // Clear existing results before rendering new results
            listview.data = [];
            listview.$result.empty();
            originalRefresh.call(listview);
        };
    }
};

You can set it dynamically with default code.

frappe.listview_settings['Item'] = {
    onload: function(listview) {
        
        const paging_values = [10, 20, 100, 500, 2500, 5000, 10000];

        listview.setup_paging_area = function() {
            this.$paging_area = $(
                `<div class="list-paging-area level">
                    <div class="level-left">
                        <div class="btn-group">
                            ${paging_values
                                .map(
                                    (value) => `
                                <button type="button" class="btn btn-default btn-sm btn-paging"
                                    data-value="${value}">
                                    ${value}
                                </button>
                            `
                                )
                                .join("")}
                        </div>
                    </div>
                    <div class="level-right">
                        <button class="btn btn-default btn-more btn-sm">
                            ${__("Load More")}
                        </button>
                    </div>
                </div>`
            ).hide();

            this.$frappe_list.append(this.$paging_area);

            this.$paging_area
                .find(`.btn-paging[data-value="${this.page_length}"]`)
                .addClass("btn-info");

            this.$paging_area.on("click", ".btn-paging", (e) => {
                const $this = $(e.currentTarget);

                this.$paging_area.find(".btn-paging").removeClass("btn-info");
                $this.addClass("btn-info");

                this.start = 0;
                this.page_length = this.selected_page_count = $this.data().value;

                this.refresh();
            });

            this.$paging_area.on("click", ".btn-more", (e) => {
                this.start += this.page_length;
                this.page_length = this.selected_page_count || 20;
                this.refresh();
            });

            this.$paging_area.show();
        };

        listview.setup_paging_area();
    }
};
1 Like