Spreadsheet with search and pagination
How to create a javascript spreadsheet instance with a modern design including search and pagination using Jspreadsheet Version 7.
<html>
<script src="https://jspreadsheet.com/v7/jspreadsheet.js"></script>
<script src="https://jsuites.net/v5/jsuites.js"></script>
<link rel="stylesheet" href="https://jspreadsheet.com/v7/jspreadsheet.css" type="text/css" />
<link rel="stylesheet" href="https://jsuites.net/v5/jsuites.css" type="text/css" />
<div id="table"></div>
<script>
let table = jspreadsheet(document.getElementById('table'), {
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: 'NzQ0MDBhYzY3MjI1MGM1MmNhYWFkYjgzODM2MjdkZmViOWFmNmQ0NWNmOGJhNTAxN2QyYWJmYzBlZjI2NTE4ZjU4NGM5ZDU5YjYyNzUzYmE5NDg3NmRmYTg1Y2FhZjJiNjIzMjcxZmJhYWVkNWU0MWJjYTRkNjJjZjdlNTE5OGIsZXlKamJHbGxiblJKWkNJNklpSXNJbTVoYldVaU9pSktjM0J5WldGa2MyaGxaWFFpTENKa1lYUmxJam94TnpNeE5UWTFOVE01TENKa2IyMWhhVzRpT2xzaWFuTndjbVZoWkhOb1pXVjBMbU52YlNJc0ltTnZaR1Z6WVc1a1ltOTRMbWx2SWl3aWFuTm9aV3hzTG01bGRDSXNJbU56WWk1aGNIQWlMQ0ozWldJaUxDSnNiMk5oYkdodmMzUWlYU3dpY0d4aGJpSTZJak0wSWl3aWMyTnZjR1VpT2xzaWRqY2lMQ0oyT0NJc0luWTVJaXdpZGpFd0lpd2lkakV4SWl3aVkyaGhjblJ6SWl3aVptOXliWE1pTENKbWIzSnRkV3hoSWl3aWNHRnljMlZ5SWl3aWNtVnVaR1Z5SWl3aVkyOXRiV1Z1ZEhNaUxDSnBiWEJ2Y25SbGNpSXNJbUpoY2lJc0luWmhiR2xrWVhScGIyNXpJaXdpYzJWaGNtTm9JaXdpY0hKcGJuUWlMQ0p6YUdWbGRITWlMQ0pqYkdsbGJuUWlMQ0p6WlhKMlpYSWlMQ0p6YUdGd1pYTWlYU3dpWkdWdGJ5STZkSEoxWlgwPQ==',
onchangepage: function(el, pageNumber, oldPage) {
console.log('New page: ' + pageNumber);
}
});
function skin(o) {
if (document.getElementById('table').classList.contains('jexcel_modern')) {
document.getElementById('table').classList.remove('jexcel_modern');
o.value = 'Change to the modern theme';
} else {
document.getElementById('table').classList.add('jexcel_modern');
o.value = 'Change to the default theme';
}
}
document.getElementById("setdefault").onclick = (e) => skin(e.target)
</script>
<p><input type='button' value='Change to the default theme' id="setdefault"></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. |