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://jexcel.net/v7/jexcel.js"></script> <script src="https://jexcel.net/v7/jsuites.js"></script> <link rel="stylesheet" href="https://jexcel.net/v7/jexcel.css" type="text/css" /> <link rel="stylesheet" href="https://jexcel.net/v7/jsuites.css" type="text/css" /> <div id="spreadsheet"></div> <script> var table = jexcel(document.getElementById('spreadsheet'), { csv: '/jexcel/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: 'YjQzMzdlOTRiOGY3ZTQ0ZDQ4ZTI1YWU3MDFjMDI0ZWJmOTNjODA1NWFiZTRiNDJhNmRiYTJlZjkwODQ3N2IwMWRmNWRjYWUwZDViM2VhMmI3NzVjOTcwMzVlN2ZhODI1Y2EyMmE3NDI0ZmE0ZjVmNGQ2MWEzN2M3MTA4MThhMDUsZXlKdVlXMWxJam9pY0dGMWJDNW9iMlJsYkNJc0ltUmhkR1VpT2pFMk16SXdPVEkwTURBc0ltUnZiV0ZwYmlJNld5SnFjMlpwWkdSc1pTNXVaWFFpTENKcVpYaGpaV3d1Ym1WMElpd2lZMjlrWlhOaGJtUmliM2d1YVc4aUxDSnFjMmhsYkd3dWJtVjBJaXdpTVROemQyMHVZM05pTG1Gd2NDSXNJbXh2WTJGc2FHOXpkQ0pkTENKd2JHRnVJam9pTXlKOQ==', 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. |