0.3.3 • Published 9 years ago

vue-pagination v0.3.3

Weekly downloads
14
License
MIT
Repository
github
Last release
9 years ago

中文

vue-pagination

Compatibility Note: vue-pagination requires Vue.js 1.0.0+

Introduction

vue-pagination is the pagination for Vue.js. It imitate jquery pagination with Vue.js.

Configuration

import Vue from 'vue'
import Resource from 'vue-resource'
import Pagination from 'vue-pagination'

Vue.use(Pagination);

initialization

let page = new Pagination({
	pageSize: 10,
    remote: {
        pageIndexName: 'pageIndex',
        pageSizeName: 'pageSize',
        params: {},
        url: '', //
        totalName: 'total',
        offset: -1,
        dataKey: 'data'
    }
});

page.init();

it's similar to the jquery pagination, but not perfect。

Field

<span class="show" v-for="item in list">{{item}}</span>
<button type="button" @click="reset">reset</button>
<pagination :page-data.sync="list" url="/api/getData" name="first"></pagination>

Event

export default{
	 	data (){
	 		return{
	 			list:[1,2,3]
	 		}
	 	},
	 	methods:{
	 		reset(){
	 			this.$page.restart('first');
	 		}
	 	}
	 }

Methods

restart

#####Arguments

  • name: String | number

The name can be either a String or an Object.

If a String, it's pagination's prop.

If a number, it's pagination's order.

<pagination :page-data.sync="list" url="/api/getData" name="first"></pagination>

reset

参数
  • options: Object

  • name: String | number

This's replace not extend, means that pagination will use new options you give;

options like this:

{
	pageSize: 10,
    remote: {
        pageIndexName: 'pageIndex',
        pageSizeName: 'pageSize',
        params: {},
        url: '', //
        totalName: 'total',
        offset: -1,
        dataKey: 'data'
    }
}

name is alias page component,like 'first', 'sord'

<pagination :page-data.sync="list" url="/api/getData" name="first"></pagination>

setParams

参数
  • params: Object

  • name: String | number

注意这里是replace This's replace not extend, means that pagination will use new options's remote params you give;

params

{
	type: 1
}

name is alias page component,like 'first', 'sord'

<pagination :page-data.sync="list" url="/api/getData" name="first"></pagination>

Todo

  • Add methods(reset, setOptions ...)

Development Setup

# install deps
npm install

# build dist files
npm run build

# serve example app at localhost:9090/example/index.html
npm run example

License

MIT

0.3.3

9 years ago

0.3.2

9 years ago

0.3.1

10 years ago

0.3.0

10 years ago

0.2.0

10 years ago

0.1.4

10 years ago

0.1.3

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago