Pagination

JSS offers search and pagination features that enhance the management of large spreadsheet datasets. Developers can leverage JSS events and methods to customize or integrate pagination according to their application's specifications.

Documentation

Methods

The following methods are related to pagination.

Method Description
page worksheet.page(pageNumber: Number) : void
Go to the page number.
whichPage worksheet.whichPage() : void
Return the current page.
quantiyOfPages worksheet.quantiyOfPages() : number
Get the quantity of pages available.

Events

The onbeforesearch can be used to intercept, change or cancel the search results.

Event Description
onbeforesearch onbeforesearch(worksheet: Object, terms: String, results: Array, search: Object)
Action to be executed before the search. It can be used to cancel or to intercept and customize the search process.
onsearch onbeforesearch(worksheet: Object, terms: String, rowNumber: Array, search: Object)
After the search process is completed.
onchangepage onbeforechangepage(worksheet: Object, newPage: Number, previousPage: Number, quantityPerPage: Number)
Action to be executed before the page changes. It can cancel the action by returning false.
onpage onchangepage(worksheet: Object, newPage: Number, previousPage: Number, quantityPerPage: Number)
After the page has changed.

Initial Settings

Initial configuration related to search and the pagination of your data grid.

Property Description
search: boolean Enable or disable the search.
pagination: number The number of items per page
paginationOptions: array The options for the user to select the number of results per page.

Examples

Search and pagination data grid

How to enable the search and pagination features on spreadsheet initialization.

<html>
<script src="https://jspreadsheet.com/v10/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v10/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons" />

<div id="spreadsheet"></div>

<input type='button' value='Search for APP' id="searchbtn"/>
<input type='button' value='Go to the second page' id="gotosecond"/>

<script>
// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzA5MzI2NThhNDRmNTQ4ODE5NmE2NTk0ZjUzODViNDg1ZWE2MzhhYjZiNTNjMGM2MzA5MmYyOTkyMDNlYTc2OWNiMThiOTQ1MTdhMDc2Zjc2MGY0NjlhMmNkMzVhZTRhYmVlYzQxNTE5ZTU2NjEyN2ViMzk2YmIxNjAxNTA0ZjMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJeE5qTTFOelV5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

// Create the spreadsheet
let spreadsheet = jspreadsheet(document.getElementById('spreadsheet'), {
    worksheets: [{
        csv: '/tests/demo.csv',
        csvHeaders: true,
        search: true,
        pagination: 10,
        paginationOptions: [10,25,50,100],
        columns: [
            { type:'text', width:80 },
            { type:'text', width:200 },
            { type:'text', width:100 },
            { type:'text', width:200 },
            { type:'text', width:100 },
        ],
    }],
    onchangepage: function(el, pageNumber, oldPage) {
        console.log('New page: ' + pageNumber);
    }
});

document.getElementById("searchbtn").onclick = () => spreadsheet[0].search('app');
document.getElementById("gotosecond").onclick = () => spreadsheet[0].page(1);
</script>
</html>
import React, { useRef } from "react";
import { Spreadsheet, Worksheet } from "@jspreadsheet/react";

const license = 'NzA5MzI2NThhNDRmNTQ4ODE5NmE2NTk0ZjUzODViNDg1ZWE2MzhhYjZiNTNjMGM2MzA5MmYyOTkyMDNlYTc2OWNiMThiOTQ1MTdhMDc2Zjc2MGY0NjlhMmNkMzVhZTRhYmVlYzQxNTE5ZTU2NjEyN2ViMzk2YmIxNjAxNTA0ZjMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJeE5qTTFOelV5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default function App() {
    // Spreadsheet array of worksheets
    const spreadsheet = useRef();
    // Columns
    const columns = [
        { type:'text', width:80 },
        { type:'text', width:200 },
        { type:'text', width:100 },
        { type:'text', width:200 },
        { type:'text', width:100 },
    ];
    // Event
    const onchangepage = (el, pageNumber, oldPage) => {
        console.log('New page: ' + pageNumber);
    }

    // Render component
    return (
        <Spreadsheet ref={spreadsheet} license={license} onchangepage={onchangepage}>
            <Worksheet columns={columns}
                csv="/tests/demo.csv"
                csvHeaders
                search
                pagination="10"
                paginationOptions={[10,25,50,100]}
            />
        </Spreadsheet>
    );
}
<template>
    <Spreadsheet ref="spreadsheet" :license="license" :onchangepage="onchangepage">
        <Worksheet :columns="columns"
            csv="/tests/demo.csv"
            csvHeaders
            search
            pagination="10"
            :paginationOptions="[10,25,50,100]" />
    </Spreadsheet>
</template>

<script>
import { Spreadsheet, Worksheet } from "@jspreadsheet/vue";

const license = 'NzA5MzI2NThhNDRmNTQ4ODE5NmE2NTk0ZjUzODViNDg1ZWE2MzhhYjZiNTNjMGM2MzA5MmYyOTkyMDNlYTc2OWNiMThiOTQ1MTdhMDc2Zjc2MGY0NjlhMmNkMzVhZTRhYmVlYzQxNTE5ZTU2NjEyN2ViMzk2YmIxNjAxNTA0ZjMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJeE5qTTFOelV5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==';

export default {
    components: {
        Spreadsheet,
        Worksheet,
    },
    methods: {
        // Event
        onchangepage(el, pageNumber, oldPage) {
            console.log('New page: ' + pageNumber);
        }
    },
    data() {
        // Reference
        const spreadsheet = ref(null);

        // Columns
        const columns = [
            { type:'text', width:80 },
            { type:'text', width:200 },
            { type:'text', width:100 },
            { type:'text', width:200 },
            { type:'text', width:100 },
        ];

        return {
            spreadsheet,
            columns,
            license,
        };
    }
}
</script>
import { Component, ViewChild, ElementRef } from "@angular/core";
import jspreadsheet from "jspreadsheet";

import "jspreadsheet/dist/jspreadsheet.css"
import "jsuites/dist/jsuites.css"

// Set your JSS license key (The following key only works for one day)
jspreadsheet.setLicense('NzA5MzI2NThhNDRmNTQ4ODE5NmE2NTk0ZjUzODViNDg1ZWE2MzhhYjZiNTNjMGM2MzA5MmYyOTkyMDNlYTc2OWNiMThiOTQ1MTdhMDc2Zjc2MGY0NjlhMmNkMzVhZTRhYmVlYzQxNTE5ZTU2NjEyN2ViMzk2YmIxNjAxNTA0ZjMsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpJeE5qTTFOelV5TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==');

@Component({
    selector: "app-root",
    template: `<div #spreadsheet></div>
    <input type='button' value='Search for APP' (click)="this.worksheets[0].search('app')" />
    <input type='button' value='Go to the second page' (click)="this.worksheets[0].page(1)" />`
})
export class AppComponent {
    @ViewChild("spreadsheet") spreadsheet: ElementRef;
    // Worksheets
    worksheets: jspreadsheet.worksheetInstance[];
    // Create a new data grid
    ngAfterViewInit() {
        // Create spreadsheet
        this.worksheets = jspreadsheet(this.spreadsheet.nativeElement, {
            worksheets: [{
                csv: '/tests/demo.csv',
                csvHeaders: true,
                search: true,
                pagination: 10,
                paginationOptions: [10,25,50,100],
                columns: [
                    { type:'text', width:80 },
                    { type:'text', width:200 },
                    { type:'text', width:100 },
                    { type:'text', width:200 },
                    { type:'text', width:100 },
                ],
            }],
            onchangepage: function(el, pageNumber, oldPage) {
                console.log('New page: ' + pageNumber);
            }
        });
    }
}