Pagination

The search and pagination are features that would 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 the 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.

EventDescription
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 searching 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.
PropertyDescription
search: booleanEnable or disable the search.
pagination: numberThe number of items per page
paginationOptions: arrayThe options for the user select the number of results per page.


Examples

How to enabled the search and pagination features on the spreadsheet initiliazation.





Source code

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

<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>
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>