# xpager

**Repository Path**: geyouwen/xpager

## Basic Information

- **Project Name**: xpager
- **Description**: 简单且好看的分页插件
- **Primary Language**: JavaScript
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-09-19
- **Last Updated**: 2023-09-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 介绍
简单的分页工具，只需传入总数，即可实现分页效果

```javascript
const options = {
        total: 0, // 总条数
        totalPages: 1, //总页数
        currentPage: 1, //当前页
        pageSize: 10, //每页条数
        goto: '', //快速跳转页码
        perPageLimit: [ //每页条数可选值
            10, 20, 50, 100,
        ],
        firstPageText: '«', //首页文本
        prevPageText: '‹',  //上一页文本
        nextPageText: '›', //下一页文本
        lastPageText: '»', //末页文本
        theme: '#16b777', //主题颜色
        showGoto: false, //是否开启快速跳转
        formEl: 'form', //分页dom容器
        pageElName: 'page', //form表单中 page 名，传至后端参数名
        pageSizeElName: 'page_size', form表单中 pagesize 名，传至后端参数名
        onPageChange: function () {} //自定义页码改变事件
    };
```
### 使用
```javascript
<script src="./xpager.js"></script>
<script>
// use demo
const options = {
    total: 10,
    totalPages: 10,
    currentPage: 1,
    showGoto: true,
    goto: '',
    // theme:'#ff5722',
};
new xpager(document.querySelector('.xpager-container'), options);
</script>
```