Spreadsheet Pagination

Search and pagination are features that help with large spreadsheet datasets. It is also possible to intercept, cancel or customize the search behavior using the onbeforechangepage events.

Documentation

Methods

The following methods are related to pagination.

Method	Description
page	`page(pageNumber: Number) : void` Go to the page number.
whichPage	`whichPage() : void` Return the current page.
quantiyOfPages	`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

The following properties are available through the initialization of the online spreadsheet.

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

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

<html>
<script src="https://jspreadsheet.com/v9/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v9/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="searchapp" />
<input type='button' value='Go to the second page' id="pageone" />

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

// 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("searchapp").onclick = () => spreadsheet[0].search('app');
document.getElementById("pageone").onclick = () => spreadsheet[0].page(1);
</script>
</html>

Edit this page on GitHub