# pageEasy

**Repository Path**: lichunyong/pageEasy

## Basic Information

- **Project Name**: pageEasy
- **Description**: 一个简单js分页插件学习
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-07-09
- **Last Updated**: 2021-08-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# pageEasy
一个js分页学习

### 两种写法
+ js原生 - pageEasy.js
+ jQ - pageEasy.JQ.js

## 一、pageEasy.js使用方法
引入
``` js
    <script src="./js/pageEasy.js"></script>
```
html   
``` html
    <div id="pageinations" page="1" size="15"></div>
```
js   
``` js
     // 初始化
    const page = new pageEasy({
        el: '#pageinations',
        total: 1,,
        event: {
            // 按钮点击事件，返回页码
            onClick: function(index){
                console.log('page',index)
            }
        }
    });
    // 点击事件或者如下
    // 按钮点击事件，返回页码
    page.$event.onClick = function(index){
        console.log('page',index)
        ...request()
    }
    function request(){
    ...
        //请求完成后动态设置page，size，total
        page.$options.page = datas.page
        page.$options.size = datas.pageSize
        page.$options.total = res.total
    }
```

#### 标签可用属性
|  属性   |  说明  |  类型  |  默认值  |  
|  ----  | ----  |  ----  | ----  |  
| page   | 默认页码 | [Number,String]  | 1 |  
| size  | 默认每页数量 | [Number,String]  | 10 |  
| total  | 默认总数 | [Number,String]  | 1 |   

#### 实例化
``` js
    const option = {
        el: '#easy-pages',
        page: 1,
        size: 10,
        event: {
            onClick: function(page){
                console.log(page)
            }
        }
    }
    const page = new pageEasy(option);
    page.$event.onClick = function(index){
        console.log('page',index)
        ...
    }
    ...
    page.$options.page = page
    page.$options.size = size
    page.$options.total = total
```
#### 实例化入参对象 option
|  属性   |  说明  |  类型  |  默认值  |  
|  ----  | ----  |  ----  | ----  |  
| el   | 挂载节点 | String  | #easy-pages |  
| page   | 默认页码 | [Number,String]  | 1 |  
| size  | 默认每页数量 | [Number,String]  | 10 |  
| total  | 默认总数 | [Number,String]  | 1 | 
| event  | 事件扩展对象 | Object  | onClick | 

#### 实例化对象 page
|  属性   |  说明  |  类型  |  参数  |  
|  ----  | ----  |  ----  | ----  |  
| $event   | 绑定事件对象 | Object  | {onClick} |  
| $options   | 动态参数对象 | Object  | {page，size，total} |  


## 二、pageEasy.JQ.js使用方法
引入
``` js
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="./js/pageEasy.js"></script>
```
html   
``` html
    <div id="pageination" page="1" size="15"></div>
```
js   
``` js
    function request(data){
        // 其他请求函数
        ... 
        // 请求成功后返回 res
        res => {
            //分页插件 pageEasy.JQ
            $("#pageination").pageEasy({
                title: 'title',
                page: data.page,
                size: data.size,
                total: res.total,
                onClick: function(page){
                    request({...data, page});
                },
            });
        }
    }
```