Paging components (some may be called paging components) should be a relatively common class of components, suitable for the case of more data. For example, think about the question and answer page:

The structure is relatively simple, usually including the functions of the previous page, the digital page, the next page and so on. Some may also include the functions of input specified page number jump and switching the number of bars per page.

xy-pagination

npm i xy-ui

• cdn

<script type="module" src="https://unpkg.com/xy-ui/components/xy-pagination.js"></script>

<!--perhaps-->

<script type="module">
    import 'https://unpkg.com/xy-ui/components/xy-pagination.js'
</script>

• Or directly from github Copy source code.

<script type="module" src='./node_modules/xy-ui/components/xy-pagination.js'></script>
<!--perhaps-->
<script type="module">
    import './node_modules/xy-ui/components/xy-pagination.js';
</script>

Support keyboard left and right key forward and backward page.

Use

<xy-pagination pagesize="3" total="50"></xy-pagination>

attribute

total data, page size per page

Sets or returns the total number of data and the number of entries per page for the paging component.

<xy-pagination pagesize="3" total="50">

Total pages: 50/3 up

JavaScript operations get, set

pagination.pagesize; //Obtain
pagination.pagesize = 5;
pagination.total;
pagination.total = 100;
//Native property operation
pagination.getAttribute('pagesize');
pagination.getAttribute('total');
pagination.setAttribute('pagesize',5);
pagination.setAttribute('total',100);

When the number of pages is small (no more than 10 pages), it will be displayed in full.

<xy-pagination pagesize="3" total="20"></xy-pagination>

Default current

You can specify an initial value default current for pages, which defaults to 1.

<xy-pagination defaultcurrent="7" pagesize="3" total="50"></xy-pagination>

JavaScript operations get, set

pagination.current; //Obtain
pagination.current = 2;
//Native property operation
pagination.getAttribute('current');
pagination.setAttribute('current',2);

If the set value exceeds the maximum number of pages, the maximum number of pages will be taken. For example, the maximum number of pages mentioned above is 17, and pagination.current=100, the actual number will be 17.

Simplicity mode simple

You can add simple attributes to show only the current page and the total number of pages.

<xy-pagination simple pagesize="3" total="50"></xy-pagination>

Event

onchange

Callbacks to page number changes support three binding modes.

<xy-pagination  onchange="XyMessage.info('Current page: '+this.current)" pagesize="3" total="50"></xy-pagination>

pagination.onchange = function(ev){
    //Several Ways of Obtaining Parameters
    /*
    event:{
        detail:{
            current,
            pagesize,
            total,
        }
    }
    */
    console.log(this.current);
    console.log(ev.target.current);
    console.log(ev.detail.current);
}

pagination.addEventListener('change',function(ev){
    console.log(this.current);
    console.log(ev.target.current);
    console.log(ev.detail.current);
})

Example

There may be more complex scenarios in the actual process, such as the jump function mentioned at the beginning of the article, which can be implemented with xy-select and xy-input.

<div class="pagination-demo">
    <xy-pagination id="pagination-demo" onchange="XyMessage.info('Current page: '+this.current)" pagesize="10" total="200"></xy-pagination>
    <xy-select defalutvalue="10" onchange="document.getElementById('pagination-demo').pagesize=this.value">
        <xy-option value="10">10 items per page</xy-option>
        <xy-option value="15">15 items per page</xy-option>
        <xy-option value="20">Twenty items per page</xy-option>
    </xy-select>
    <span>Jump</span><xy-input type="number" defalutvalue="1" min="1" onchange="document.getElementById('pagination-demo').current = this.value"></xy-input><span>page</span>
</div>

The effect is predictable as shown at the beginning of the article. codepen demo

Subsection

The use of xy-pagination is very simple, just two or three attributes, a callback method, hoping that small partners in need can use it immediately, but also hope to be able to go. github Give a star, thank you.~

By the way, the next plan is to prepare a date selector (which seems to have never been handwritten yet), which seems a bit complicated and will take a little longer. Please be patient and wait for it.~