jqwidgets-scripts-custom/demos/React/app/datatable/pagingapi/app.js

jQWidgets is an advanced jQuery, Angular 7, Vue, React, ASP .NET MVC, Custom Elements and HTML5 UI framework.

import React from 'react';
import ReactDOM from 'react-dom';

import JqxDataTable from '../../../jqwidgets-react/react_jqxdatatable.js';
import JqxDropDownList from '../../../jqwidgets-react/react_jqxdropdownlist.js';
import JqxInput from '../../../jqwidgets-react/react_jqxinput.js';
import JqxButton from '../../../jqwidgets-react/react_jqxbuttons.js';
import JqxPanel from '../../../jqwidgets-react/react_jqxpanel.js';

class App extends React.Component {
    componentDidMount() {
        this.refs.pagerModeDropDownList.on('select', (event) => {
            if (event.args.index == 0) {
                this.refs.myDataTable.pagerMode('default');
            }
            else {
                this.refs.myDataTable.pagerMode('advanced');
            }
        });

        this.refs.pagerPositionDropDownList.on('select', (event) => {
            if (event.args.index == 0) {
                this.refs.myDataTable.pagerPosition('top');
            }
            else if (event.args.index == 1) {
                this.refs.myDataTable.pagerPosition('bottom');
            }
            else {
                this.refs.myDataTable.pagerPosition('both');
            }
        });

        this.refs.applyPage.on('click', () => {
            let page = parseInt(this.refs.gotopage.val());
            if (!isNaN(page)) {
                page--;
                if (page < 0) page = 0;
                this.refs.myDataTable.goToPage(page);
            }
        });

        this.refs.myDataTable.on('pageChanged', (event) => {
            let panel = document.getElementsByClassName('myPanel')[0];
            let count = panel.getElementsByClassName('logged');
            if (count.length >= 5) {
                this.refs.events.clearcontent();
            }
            let args = event.args;
            let eventData = '<div>Page:' + (1 + args.pagenum) + ', Page Size: ' + args.pageSize + '</div>';
            this.refs.events.prepend('<div class="logged" style="margin-top: 5px;">' + eventData + '</div>');
        });

        this.refs.myDataTable.on('pageSizeChanged', (event) => {
            this.refs.events.clearcontent();
            let args = event.args;
            let eventData = '<div>Page:' + (1 + args.pagenum) + ', Page Size: ' + args.pageSize + ', Old Page Size: ' + args.oldPageSize + '</div>';
            this.refs.events.prepend('<div style="margin-top: 5px;">' + eventData + '</div>');
        });
    }
    render() {
        let source =
            {
                localData: generatedata(200),
                dataType: 'array',
                datafields:
                [
                    { name: 'firstname', type: 'string' },
                    { name: 'lastname', type: 'string' },
                    { name: 'productname', type: 'string' },
                    { name: 'quantity', type: 'number' },
                    { name: 'price', type: 'number' },
                    { name: 'total', type: 'number' }
                ]
            };

        let dataAdapter = new $.jqx.dataAdapter(source);

        let columns =
            [
                { text: 'Name', dataField: 'firstname', width: 200 },
                { text: 'Last Name', dataField: 'lastname', width: 200 },
                { text: 'Product', editable: false, dataField: 'productname', width: 180 },
                { text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
                { text: 'Unit Price', dataField: 'price', width: 80, cellsalign: 'right', cellsFormat: 'c2' },
                { text: 'Total', dataField: 'total', width: 80, cellsalign: 'right', cellsFormat: 'c2' }
            ];

        return (
            <div>
                <JqxDataTable ref='myDataTable' style={{ float: 'left' }}
                    width={650} source={dataAdapter} altRows={true}
                    pageable={true} pagerPosition={'both'} columns={columns}
                />
                <div style={{ fontSize: 13, fontFamily: 'Verdana', float: 'left', marginLeft: 30 }}>
                    <div><strong>Settings</strong></div>
                    <div style={{ marginTop: 10 }}>
                        <div>Pager Mode:</div>
                        <JqxDropDownList ref='pagerModeDropDownList' style={{ marginTop: 5 }}
                            width={120} height={25} selectedIndex={0}
                            source={['default', 'advanced']} autoDropDownHeight={true}
                        />
                        <div style={{ marginTop: 10 }}>Pager Position:</div>
                        <JqxDropDownList ref='pagerPositionDropDownList' style={{ marginTop: 5 }}
                            width={120} height={25} selectedIndex={2}
                            source={['top', 'bottom', 'both']} autoDropDownHeight={true}
                        />
                        <div style={{ marginTop: 10 }}>Go to Page:</div>
                        <JqxInput ref='gotopage' style={{ marginTop: 5, float: 'left', marginRight: 5 }}
                            value='1' width={120} height={25}
                        />
                        <JqxButton ref='applyPage' value='Apply' height={25} style={{ marginTop: 6 }} />
                    </div>
                    <div style={{ marginTop: 10 }}>
                        <div>Event Log:</div>
                        <JqxPanel ref='events' className='myPanel' style={{ marginTop: 5 }}
                            width={150} height={150}
                        />
                    </div>
                </div>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('app'));