Examples
Back to 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/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="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: 'YTA4MTg5NDk1ZTY0OWVlYzM5MmRhNTdjMjMwZWQ4OTFiZjU4NWE3YmU0ODA0NGE3YzI5MmJhZjAyY2FkOGI0Y2FiNDFlNjljZWRhYTUyNWIwYzFhOGQ4OGU1YTFkYmI0Yjg5MzNiYzY3NTJiYTdmYTVhYWUxMDA5ZWJhNjMwN2IsZXlKdVlXMWxJam9pU25Od2NtVmhaSE5vWldWMElpd2laR0YwWlNJNk1UWTVOalV3TWprMU5Dd2laRzl0WVdsdUlqcGJJbXB6Y0hKbFlXUnphR1ZsZEM1amIyMGlMQ0pqYjJSbGMyRnVaR0p2ZUM1cGJ5SXNJbXB6YUdWc2JDNXVaWFFpTENKamMySXVZWEJ3SWl3aWQyVmlJaXdpYkc5allXeG9iM04wSWwwc0luQnNZVzRpT2lJek5DSXNJbk5qYjNCbElqcGJJblkzSWl3aWRqZ2lMQ0oyT1NJc0luWXhNQ0lzSW1Ob1lYSjBjeUlzSW1admNtMXpJaXdpWm05eWJYVnNZU0lzSW5CaGNuTmxjaUlzSW5KbGJtUmxjaUlzSW1OdmJXMWxiblJ6SWl3aWFXMXdiM0owSWl3aVltRnlJaXdpZG1Gc2FXUmhkR2x2Ym5NaUxDSnpaV0Z5WTJnaUxDSndjbWx1ZENJc0luTm9aV1YwY3lKZExDSmtaVzF2SWpwMGNuVmxmUT09',
    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.