Examples
Spreadsheet with search and pagination
How to create a javascript spreadsheet instance with a modern design including search and pagination.
Source code
<html> <script src="https://jspreadsheet.com/v7/jspreadsheet.js"></script> <script src="https://jsuites.net/v4/jsuites.js"></script> <link rel="stylesheet" href="https://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" /> <link rel="stylesheet" href="https://jsuites.net/v4/jsuites.css" type="text/css" /> <div id="spreadsheet"></div> <script> var table = jspreadsheet(document.getElementById('spreadsheet'), { csv: '/jspreadsheet/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 }, ], license: 'Y2NjZmQ2YmUxNzliNjg2ZTE3OWVjNjg3OTZmMjE2OWI1ZjBjZDg5Y2QzNGU4MWEyNGJhYmEwZDBiNDAxNGJjODdlZjU2NWE1NzQzNzFiN2QxYjQ3ZWYxZDExZDA5MmY3MzZlNzk3YzA1MjU5NDM5ZWJmMDQ2OTk5YjljMGE0MDQsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTNOVGs1T1RFeU5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWJHOWpZV3hvYjNOMElsMHNJbkJzWVc0aU9pSXpJaXdpYzJOdmNHVWlPbHNpZGpjaUxDSjJPQ0lzSW5ZNUlpd2lZMmhoY25Seklpd2labTl5YlhNaUxDSm1iM0p0ZFd4aElpd2ljR0Z5YzJWeUlpd2ljbVZ1WkdWeUlpd2lZMjl0YldWdWRITWlMQ0pwYlhCdmNuUWlMQ0ppWVhJaUxDSjJZV3hwWkdGMGFXOXVjeUlzSW5ObFlYSmphQ0pkTENKa1pXMXZJanAwY25WbGZRPT0=', onchangepage: function(el, pageNumber, oldPage) { console.log('New page: ' + pageNumber); } }); function skin(o) { if (document.getElementById('spreadsheet').classList.contains('jexcel_modern')) { document.getElementById('spreadsheet').classList.remove('jexcel_modern'); o.value = 'Change to the modern theme'; } else { document.getElementById('spreadsheet').classList.add('jexcel_modern'); o.value = 'Change to the default theme'; } } </script> <p><input type='button' value='Change to the default theme' onclick='skin(this)'></p> </html>
Related events
Events | Description |
---|---|
onbeforesearch | onbeforesearch(DOMElement el, String str, Array rowNumbers, Object search) Action to be executed before the search. It can be used to cancel or to intercept and customize the searching process. |
onsearch | onbeforesearch(DOMElement el, String str, Array rowNumbers, Object search) After the search process is completed. |
onchangepage | onchangepage(DOMElement el, Number pageNumber, Number oldPage, Number quantityPerPage) Action to be executed before the page changes. It can cancel the action by returning false. |
onpage | onpage(DOMElement el, Number quantityPerPage, Number oldPage, Number pageNumber) After the page has changed. |
Related methods
Method | Description |
---|---|
page | table.page(Number pageNumber) Go to the page number. |
whichPage | table.whichPage() Return the current page. |
quantiyOfPages | table.quantiyOfPages() Get the quantity of pages. |