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.JavaScript example
<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' onclick="spreadsheet[0].search('app')" /> <input type='button' value='Go to the second page' onclick="spreadsheet[0].page(1)" /> <script> // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense('ZjQ5ZWNhNDRhNzc2MWMxZDE1ZTM5MjllZDA3YTk3NDFjNzEzZDBjMTkxZDZmODlkNjNkNmQxMzc5OThiMzQ4YzIyMzIwM2UzMmE4OTQzYThhMDMzYzhlODdhYjQxYzI1OGFjN2U3MzdhMDMwYTJkM2ZiZjNlMmRjOGViYjFmY2UsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6T0RVNU5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); // Create the spreadsheet var 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); } }); </script> </html>
React example
import React, { useRef } from "react"; import { Spreadsheet, Worksheet } from "@jspreadsheet/react"; const license = 'ZjQ5ZWNhNDRhNzc2MWMxZDE1ZTM5MjllZDA3YTk3NDFjNzEzZDBjMTkxZDZmODlkNjNkNmQxMzc5OThiMzQ4YzIyMzIwM2UzMmE4OTQzYThhMDMzYzhlODdhYjQxYzI1OGFjN2U3MzdhMDMwYTJkM2ZiZjNlMmRjOGViYjFmY2UsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6T0RVNU5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'; 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> ); }
Vue example
<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 = 'ZjQ5ZWNhNDRhNzc2MWMxZDE1ZTM5MjllZDA3YTk3NDFjNzEzZDBjMTkxZDZmODlkNjNkNmQxMzc5OThiMzQ4YzIyMzIwM2UzMmE4OTQzYThhMDMzYzhlODdhYjQxYzI1OGFjN2U3MzdhMDMwYTJkM2ZiZjNlMmRjOGViYjFmY2UsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6T0RVNU5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'; 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>
Angular example
import { Component, ViewChild, ElementRef } from "@angular/core"; import * as jspreadsheet from "jspreadsheet"; // Set your JSS license key (The following key only works for one day) jspreadsheet.setLicense('ZjQ5ZWNhNDRhNzc2MWMxZDE1ZTM5MjllZDA3YTk3NDFjNzEzZDBjMTkxZDZmODlkNjNkNmQxMzc5OThiMzQ4YzIyMzIwM2UzMmE4OTQzYThhMDMzYzhlODdhYjQxYzI1OGFjN2U3MzdhMDMwYTJkM2ZiZjNlMmRjOGViYjFmY2UsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTROVGd6T0RVNU5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09'); @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 ngOnInit() { // 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); } }); } }