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=='
});

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