DataView component initial
Merve Özçifçi
parent
fd6b9abc25
commit
dbb5146eb8
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,54 @@
|
|||
{
|
||||
"data":[
|
||||
{"vin":"a1653d4d","brand":"VW","year":1998,"color":"White","price":10000},
|
||||
{"vin":"ddeb9b10","brand":"Mercedes","year":1985,"color":"Green","price":25000},
|
||||
{"vin":"d8ebe413","brand":"Jaguar","year":1979,"color":"Silver","price":30000},
|
||||
{"vin":"aab227b7","brand":"Audi","year":1970,"color":"Black","price":12000},
|
||||
{"vin":"631f7412","brand":"Volvo","year":1992,"color":"Red","price":15500},
|
||||
{"vin":"7d2d22b0","brand":"VW","year":1993,"color":"Maroon","price":40000},
|
||||
{"vin":"50e900ca","brand":"Fiat","year":1964,"color":"Blue","price":25000},
|
||||
{"vin":"4bbcd603","brand":"Renault","year":1983,"color":"Maroon","price":22000},
|
||||
{"vin":"70214c7e","brand":"Renault","year":1961,"color":"Black","price":19000},
|
||||
{"vin":"ec229a92","brand":"Audi","year":1984,"color":"Brown","price":36000},
|
||||
{"vin":"1083ee40","brand":"VW","year":1984,"color":"Silver","price":215000},
|
||||
{"vin":"6e0da3ab","brand":"Volvo","year":1987,"color":"Silver","price":32000},
|
||||
{"vin":"5aee636b","brand":"Jaguar","year":1995,"color":"Maroon","price":20000},
|
||||
{"vin":"7cc43997","brand":"Jaguar","year":1984,"color":"Orange","price":14000},
|
||||
{"vin":"88ec9f66","brand":"Honda","year":1989,"color":"Maroon","price":36000},
|
||||
{"vin":"f5a4a5f5","brand":"BMW","year":1986,"color":"Blue","price":28000},
|
||||
{"vin":"15b9a5c9","brand":"Mercedes","year":1986,"color":"Orange","price":14000},
|
||||
{"vin":"f7e18d01","brand":"Mercedes","year":1991,"color":"White","price":25000},
|
||||
{"vin":"cec593d7","brand":"VW","year":1992,"color":"Blue","price":36000},
|
||||
{"vin":"d5bac4f0","brand":"Renault","year":2001,"color":"Blue","price":25000},
|
||||
{"vin":"56b527c8","brand":"Jaguar","year":1990,"color":"Yellow","price":52000},
|
||||
{"vin":"1ac011ff","brand":"Audi","year":1966,"color":"Maroon","price":45000},
|
||||
{"vin":"fc074185","brand":"BMW","year":1962,"color":"Blue","price":54000},
|
||||
{"vin":"606ba663","brand":"Honda","year":1982,"color":"Blue","price":22000},
|
||||
{"vin":"d05060b8","brand":"Mercedes","year":2003,"color":"Silver","price":15000},
|
||||
{"vin":"46e4bbe8","brand":"Mercedes","year":1986,"color":"White","price":18000},
|
||||
{"vin":"c29da0d7","brand":"BMW","year":1983,"color":"Brown","price":32000},
|
||||
{"vin":"24622f70","brand":"VW","year":1973,"color":"Maroon","price":36000},
|
||||
{"vin":"7f573d2c","brand":"Mercedes","year":1991,"color":"Red","price":21000},
|
||||
{"vin":"b69e6f5c","brand":"Jaguar","year":1993,"color":"Yellow","price":16000},
|
||||
{"vin":"ead9bf1d","brand":"Fiat","year":1968,"color":"Maroon","price":43000},
|
||||
{"vin":"bc58113e","brand":"Renault","year":1981,"color":"Silver","price":36000},
|
||||
{"vin":"2989d5b1","brand":"Honda","year":2006,"color":"Blue","price":240000},
|
||||
{"vin":"c243e3a0","brand":"Fiat","year":1990,"color":"Maroon","price":15000},
|
||||
{"vin":"e3d3ebf3","brand":"Audi","year":1996,"color":"White","price":28000},
|
||||
{"vin":"45337e7a","brand":"Mercedes","year":1982,"color":"Blue","price":14000},
|
||||
{"vin":"36e9cf7e","brand":"Fiat","year":2000,"color":"Orange","price":26000},
|
||||
{"vin":"036bf135","brand":"Mercedes","year":1973,"color":"Black","price":22000},
|
||||
{"vin":"ad612e9f","brand":"Mercedes","year":1975,"color":"Red","price":45000},
|
||||
{"vin":"97c6e1e9","brand":"Volvo","year":1967,"color":"Green","price":42000},
|
||||
{"vin":"ae962274","brand":"Volvo","year":1982,"color":"Red","price":36000},
|
||||
{"vin":"81f8972a","brand":"BMW","year":2007,"color":"Black","price":56000},
|
||||
{"vin":"f8506743","brand":"Audi","year":1975,"color":"Blue","price":42000},
|
||||
{"vin":"596859d1","brand":"Fiat","year":2002,"color":"Green","price":48000},
|
||||
{"vin":"d83c1d9a","brand":"Volvo","year":1972,"color":"Black","price":29000},
|
||||
{"vin":"32f41550","brand":"Mercedes","year":1978,"color":"Brown","price":17000},
|
||||
{"vin":"c28cd2e4","brand":"Volvo","year":1982,"color":"Silver","price":24000},
|
||||
{"vin":"80890dcc","brand":"Audi","year":1962,"color":"White","price":36000},
|
||||
{"vin":"4bf1aeb5","brand":"VW","year":2000,"color":"Silver","price":24000},
|
||||
{"vin":"45ca4786","brand":"BMW","year":1995,"color":"Maroon","price":50000}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"data": [
|
||||
{"brand": "VW", "year": 2012, "color": "Orange", "vin": "dsad231ff"},
|
||||
{"brand": "Audi", "year": 2011, "color": "Black", "vin": "gwregre345"},
|
||||
{"brand": "Renault", "year": 2005, "color": "Gray", "vin": "h354htr"},
|
||||
{"brand": "BMW", "year": 2003, "color": "Blue", "vin": "j6w54qgh"},
|
||||
{"brand": "Mercedes", "year": 1995, "color": "Orange", "vin": "hrtwy34"},
|
||||
{"brand": "Volvo", "year": 2005, "color": "Black", "vin": "jejtyj"},
|
||||
{"brand": "Honda", "year": 2012, "color": "Yellow", "vin": "g43gr"},
|
||||
{"brand": "Jaguar", "year": 2013, "color": "Orange", "vin": "greg34"},
|
||||
{"brand": "Ford", "year": 2000, "color": "Black", "vin": "h54hw5"},
|
||||
{"brand": "Fiat", "year": 2013, "color": "Red", "vin": "245t2s"}
|
||||
]
|
||||
}
|
||||
|
|
@ -50,6 +50,7 @@
|
|||
</a>
|
||||
<div :class="{'submenuhide': activeMenuIndex !== 2, 'submenushow': activeMenuIndex === 2}">
|
||||
<div>
|
||||
<router-link to="/dataview">● DataView</router-link>
|
||||
<router-link to="/fullcalendar">● FullCalendar</router-link>
|
||||
<router-link to="/paginator">● Paginator</router-link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,41 @@
|
|||
.p-dataview .p-paginator {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.p-dataview-column {
|
||||
padding: .25em;
|
||||
}
|
||||
|
||||
.p-dataview-content-empty {
|
||||
padding: .25em .625em;
|
||||
}
|
||||
|
||||
.p-dataview .p-dataview-header,
|
||||
.p-dataview .p-dataview-footer {
|
||||
text-align: center;
|
||||
padding: .5em .75em;
|
||||
}
|
||||
|
||||
.p-dataview .p-dataview-header {
|
||||
border-bottom: 0 none;
|
||||
}
|
||||
|
||||
.p-dataview .p-dataview-footer {
|
||||
border-top: 0 none;
|
||||
}
|
||||
|
||||
.p-dataview .p-paginator-top {
|
||||
border-bottom: 0 none;
|
||||
}
|
||||
|
||||
.p-dataview .p-paginator-bottom {
|
||||
border-top: 0 none;
|
||||
}
|
||||
|
||||
.p-dataview.p-dataview-list > .p-dataview-content > div.p-grid > div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.p-dataview-loading-icon {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
|
@ -0,0 +1,168 @@
|
|||
<template>
|
||||
<div :class="containerClass">
|
||||
<div class="p-dataview-header" v-if="$scopedSlots.header">
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
<Paginator v-if="paginatorTop" :rows="rows" :first="first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
|
||||
:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-top': paginatorTop}"></Paginator>
|
||||
<div class="p-dataview-content">
|
||||
<div class="p-grid">
|
||||
<template v-for="(data,index) of (value)">
|
||||
<slot v-if="$scopedSlots.listItem && layout === 'list'" name="listItem" :data="data" :index="index"></slot>
|
||||
<slot v-if="$scopedSlots.gridItem && layout === 'grid'" name="gridItem" :data="data" :index="index"></slot>
|
||||
</template>
|
||||
<div v-if="isEmpty" class="p-col-12">{{emptyMessage}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<Paginator v-if="paginatorBottom" :rows="rows" :first="first" :totalRecords="getTotalRecords" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
|
||||
:currentPageReportTemplate="currentPageReportTemplate" :class="{'p-paginator-bottom': paginatorBottom}"></Paginator>
|
||||
<div class="p-dataview-footer" v-if="$scopedSlots.footer">
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ObjectUtils from '../utils/ObjectUtils';
|
||||
export default {
|
||||
props: {
|
||||
value: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'list'
|
||||
},
|
||||
rows: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
first: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
totalRecords: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
paginator: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
paginatorPosition: {
|
||||
type: String,
|
||||
default: 'bottom'
|
||||
},
|
||||
alwaysShowPaginator: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
paginatorTemplate: {
|
||||
type: String,
|
||||
default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLinks'
|
||||
},
|
||||
pageLinkSize: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
rowsPerPageOptions: {
|
||||
type: Array,
|
||||
default: null
|
||||
},
|
||||
currentPageReportTemplate: {
|
||||
type: String,
|
||||
default: '({currentPage} of {totalPages})'
|
||||
},
|
||||
emptyMessage: {
|
||||
type: String,
|
||||
default: 'No records found'
|
||||
},
|
||||
sortField: {
|
||||
type: String,
|
||||
default: null
|
||||
},
|
||||
sortOrder: {
|
||||
type: Number,
|
||||
default: null
|
||||
},
|
||||
lazy: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sort() {
|
||||
if (this.value) {
|
||||
const value = [...this.value];
|
||||
|
||||
value.sort((data1, data2) => {
|
||||
let value1 = ObjectUtils.resolveFieldData(data1, this.sortField);
|
||||
let value2 = ObjectUtils.resolveFieldData(data2, this.sortField);
|
||||
let result = null;
|
||||
|
||||
if (value1 == null && value2 != null)
|
||||
result = -1;
|
||||
else if (value1 != null && value2 == null)
|
||||
result = 1;
|
||||
else if (value1 == null && value2 == null)
|
||||
result = 0;
|
||||
else if (typeof value1 === 'string' && typeof value2 === 'string')
|
||||
result = value1.localeCompare(value2, undefined, { numeric: true });
|
||||
else
|
||||
result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;
|
||||
|
||||
return (this.sortOrder * result);
|
||||
});
|
||||
|
||||
return value;
|
||||
}
|
||||
else {
|
||||
return null;
|
||||
}
|
||||
},
|
||||
processData() {
|
||||
let data = this.value;
|
||||
|
||||
if (data && data.length) {
|
||||
if (this.sortField) {
|
||||
data = this.sort();
|
||||
}
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
containerClass() {
|
||||
return ['p-dataview p-component', {
|
||||
'p-dataview-list': (this.layout === 'list'),
|
||||
'p-dataview-grid': (this.layout === 'grid')
|
||||
}
|
||||
]
|
||||
},
|
||||
getTotalRecords() {
|
||||
if (this.totalRecords)
|
||||
return this.totalRecords;
|
||||
else
|
||||
return this.value ? this.value.length : 0;
|
||||
},
|
||||
isEmpty() {
|
||||
return (!this.value || this.value.length === 0);
|
||||
},
|
||||
paginatorTop() {
|
||||
if(this.paginatorPosition && (this.paginatorPosition !== 'bottom' || this.paginatorPosition === 'both')) {
|
||||
return true
|
||||
}
|
||||
else
|
||||
return null;
|
||||
},
|
||||
paginatorBottom() {
|
||||
if(this.paginatorPosition && (this.paginatorPosition !== 'top' || this.paginatorPosition === 'both')) {
|
||||
return true
|
||||
}
|
||||
else
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<template>
|
||||
<div class="p-dataview-layout-options p-selectbutton p-buttonset">
|
||||
<button :class="buttonListClass" @click="changeLayout($event,'list')">
|
||||
<i class="pi pi-bars p-button-icon-left"></i>
|
||||
<span class="p-button-text p-clickable">p-btn</span>
|
||||
</button>
|
||||
<button :class="buttonGridClass" @click="changeLayout($event,'grid')">
|
||||
<i class="pi pi-th-large p-button-icon-left"></i>
|
||||
<span class="p-button-text p-clickable">p-btn</span>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
layout: {
|
||||
type: String,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
buttonListClass(){
|
||||
return [
|
||||
'p-button p-button-icon-only',
|
||||
{'p-highlight': this.layout === 'list'}
|
||||
]
|
||||
},
|
||||
buttonGridClass(){
|
||||
return [
|
||||
'p-button p-button-icon-only',
|
||||
{'p-highlight': this.layout === 'grid'}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
changeLayout(event, layoutMode){
|
||||
this.$emit('change', {originalEvent: event, value: layoutMode});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -10,6 +10,8 @@ import Card from './components/card/Card';
|
|||
import Chart from './components/chart/Chart';
|
||||
import Checkbox from './components/checkbox/Checkbox';
|
||||
import Chips from './components/chips/Chips';
|
||||
import DataView from './components/dataview/DataView';
|
||||
import DataViewLayoutOptions from './components/dataview/DataViewLayoutOptions';
|
||||
import Dialog from './components/dialog/Dialog';
|
||||
import Dropdown from './components/dropdown/Dropdown';
|
||||
import Editor from './components/editor/Editor';
|
||||
|
|
@ -63,6 +65,8 @@ Vue.component('Card', Card);
|
|||
Vue.component('Chart', Chart);
|
||||
Vue.component('Checkbox', Checkbox);
|
||||
Vue.component('Chips', Chips);
|
||||
Vue.component('DataView', DataView);
|
||||
Vue.component('DataViewLayoutOptions', DataViewLayoutOptions);
|
||||
Vue.component('Dialog', Dialog);
|
||||
Vue.component('Dropdown', Dropdown);
|
||||
Vue.component('Editor', Editor);
|
||||
|
|
|
|||
|
|
@ -85,6 +85,11 @@ export default new Router({
|
|||
path: '/chips',
|
||||
name: 'chips',
|
||||
component: () => import('./views/chips/ChipsDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/dataview',
|
||||
name: 'dataview',
|
||||
component: () => import('./views/dataview/DataViewDemo.vue')
|
||||
},
|
||||
{
|
||||
path: '/dialog',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
import axios from 'axios'
|
||||
|
||||
export default class CarService {
|
||||
|
||||
getCarsSmall() {
|
||||
return axios.get('demo/data/cars-small.json').then(res => res.data.data);
|
||||
}
|
||||
|
||||
getCarsMedium() {
|
||||
return axios.get('demo/data/cars-medium.json').then(res => res.data.data);
|
||||
}
|
||||
|
||||
getCarsLarge() {
|
||||
return axios.get('demo/data/cars-large.json').then(res => res.data.data);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,86 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>DataView</h1>
|
||||
<p>DataView displays data in grid or list layout with pagination and sorting features.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Default</h3>
|
||||
<DataView :value="cars" :layout="layout" paginatorPosition='both' :paginator="true" :rows="20">
|
||||
<template #header>
|
||||
<div class="p-grid">
|
||||
<div class="p-col-6" style="text-align: right"></div>
|
||||
<div class="p-col-6" style="text-align: right">
|
||||
<DataViewLayoutOptions :layout="layout" @change="changeMode"></DataViewLayoutOptions>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #listItem="slotProps" >
|
||||
<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
|
||||
<div class="p-grid">
|
||||
<div class="p-col-12 p-md-3">
|
||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
</div>
|
||||
<div class="p-col-12 p-md-8 car-data">
|
||||
<div>Vin: <b>{{slotProps.data.vin}}</b></div>
|
||||
<div>Year: <b>{{slotProps.data.year}}</b></div>
|
||||
<div>Brand: <b>{{slotProps.data.brand}}</b></div>
|
||||
<div>Color: <b>{{slotProps.data.color}}</b></div>
|
||||
</div>
|
||||
|
||||
<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
|
||||
<Button icon="pi pi-search"></Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #gridItem="slotProps">
|
||||
<div style="padding: .5em" class="p-col-12 p-md-3">
|
||||
<img :src="'/demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
|
||||
<div class="car-detail">{{slotProps.data.year}} - {{slotProps.data.color}}</div>
|
||||
<hr class="ui-widget-content" style="border-top: 0" />
|
||||
<Button icon="pi pi-search"></Button>
|
||||
</div>
|
||||
</template>
|
||||
</DataView>
|
||||
</div>
|
||||
|
||||
<DataViewDoc />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CarService from '../../service/CarService';
|
||||
import DataViewDoc from './DataViewDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
cars: null,
|
||||
layout: 'list',
|
||||
}
|
||||
},
|
||||
carService: null,
|
||||
created() {
|
||||
this.carService = new CarService();
|
||||
},
|
||||
mounted() {
|
||||
this.carService.getCarsLarge().then(data => this.cars = data);
|
||||
},
|
||||
methods: {
|
||||
changeMode(event) {
|
||||
this.layout = event.value;
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'DataViewDoc': DataViewDoc
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,297 @@
|
|||
<template>
|
||||
<div class="content-section documentation">
|
||||
<TabView>
|
||||
<TabPanel header="Documentation">
|
||||
<h3>Import</h3>
|
||||
<CodeHighlight lang="javascript">
|
||||
import DataView from 'primevue/dataview';
|
||||
</CodeHighlight>
|
||||
|
||||
<!--<h3>Getting Started</h3>
|
||||
<p><i>first</i>, <i>rows</i> and <i>totalRecords</i> are the required properties of the Paginator.</p>
|
||||
<CodeHighlight>
|
||||
<Paginator :first.sync="first" :rows="10" :totalRecords="totalItemsCount"></Paginator>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Start Offset</h3>
|
||||
<p><i>first</i> property defines the index of the first item displayed by the paginator and should be used with the sync operator.
|
||||
This is useful in cases where the paginator needs to be controlled programmatically such as resetting or navigating to a certain page.</p>
|
||||
<CodeHighlight>
|
||||
<Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"></Paginator>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Rows Per Page</h3>
|
||||
<p>Number of items per page can be changed by the user using a dropdown with the <i>rowsPerPageOptions</i> property which accepts an array of possible values.
|
||||
As <i>rows</i> also change when the dropdown changes, use the sync operator for two-way binding.</p>
|
||||
<CodeHighlight>
|
||||
<Paginator :first.sync="offset" :rows.sync="rows" :totalRecords="totalItemsCount" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Template</h3>
|
||||
<p>Paginator elements can be customized using the template property using the predefined keys, default value is
|
||||
"FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown". Here are the available elements that
|
||||
can be placed inside a paginator in any order.</p>
|
||||
|
||||
<ul>
|
||||
<li>FirstPageLink</li>
|
||||
<li>PrevPageLink</li>
|
||||
<li>PageLinks</li>
|
||||
<li>NextPageLink</li>
|
||||
<li>LastPageLink</li>
|
||||
<li>RowsPerPageDropdown</li>
|
||||
<li>CurrentPageReport</li>
|
||||
</ul>
|
||||
|
||||
<CodeHighlight>
|
||||
<Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount"
|
||||
template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink"></Paginator>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Custom Content</h3>
|
||||
<p>There are two slots available named "left" and "right" to add custom content to these locations. Both slots get
|
||||
a state object as a slot property to provide the current page, first index and the rows.
|
||||
</p>
|
||||
<CodeHighlight>
|
||||
<template v-pre>
|
||||
<Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount">
|
||||
<template #left="slotProps">
|
||||
Page: {{slotProps.state.page}}
|
||||
First: {{slotProps.state.first}}
|
||||
Rows: {{slotProps.state.rows}}
|
||||
</template>
|
||||
<template #right>
|
||||
<Button type="button" icon="pi pi-search" />
|
||||
</template>
|
||||
</Paginator>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Page Change Event</h3>
|
||||
<p>Paginator provides only one event called <i>page-change</i> that passes all the information about the change event.</p>
|
||||
<CodeHighlight>
|
||||
<Paginator :first.sync="offset" :rows="10" :totalRecords="totalItemsCount" @page-change="onPage($event)"></Paginator>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
onPage(event) {
|
||||
//event.page: New page number
|
||||
//event.first: Index of first record
|
||||
//event.rows: Number of rows to display in new page
|
||||
//event.pageCount: Total number of pages
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<h3>Properties</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>totalRecords</td>
|
||||
<td>number</td>
|
||||
<td>0</td>
|
||||
<td>Number of total records.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>rows</td>
|
||||
<td>number</td>
|
||||
<td>0</td>
|
||||
<td>Data count to display per page.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>first</td>
|
||||
<td>number</td>
|
||||
<td>0</td>
|
||||
<td>Zero-relative number of the first row to be displayed.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>pageLinkSize</td>
|
||||
<td>number</td>
|
||||
<td>5</td>
|
||||
<td>Number of page links to display.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>rowsPerPageOptions</td>
|
||||
<td>array</td>
|
||||
<td>null</td>
|
||||
<td>Array of integer values to display inside rows per page dropdown.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>template</td>
|
||||
<td>string</td>
|
||||
<td>FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown</td>
|
||||
<td>Template of the paginator.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>currentPageReportTemplate</td>
|
||||
<td>string</td>
|
||||
<td>({currentPage} of {totalPages})</td>
|
||||
<td>Template of the current page report element.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Events</h3>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Parameters</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>page-change</td>
|
||||
<td>event.page: New page number <br/>
|
||||
event.first: Index of first record <br/>
|
||||
event.rows: Number of rows to display in new page <br/>
|
||||
event.pageCount: Total number of pages
|
||||
</td>
|
||||
<td>Callback to invoke when page changes, the event object contains information about the new state.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3>Styling</h3>
|
||||
<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
|
||||
<div class="doc-tablewrapper">
|
||||
<table class="doc-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Element</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>p-paginator</td>
|
||||
<td>Container element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-paginator-first</td>
|
||||
<td>First page element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-paginator-prev</td>
|
||||
<td>Previous page element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-paginator-pages</td>
|
||||
<td>Container of page links.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-paginator-page</td>
|
||||
<td>A page link.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-paginator-next</td>
|
||||
<td>Next pge element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-paginator-last</td>
|
||||
<td>Last page element.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-paginator-rpp-options</td>
|
||||
<td>Rows per page dropdown.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3>Dependencies</h3>
|
||||
<p>None.</p>
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
<TabPanel header="Source">
|
||||
<a href="https://github.com/primefaces/primereact/tree/master/src/showcase/paginator" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
|
||||
<span>View on GitHub</span>
|
||||
</a>
|
||||
<CodeHighlight>
|
||||
<template>
|
||||
<div>
|
||||
<div class="content-section introduction">
|
||||
<div class="feature-intro">
|
||||
<h1>Paginator</h1>
|
||||
<p>Paginator is a generic component to display content in paged format.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content-section implementation">
|
||||
<h3 class="first">Default</h3>
|
||||
<Paginator :first.sync="first" :rows.sync="rows" :totalRecords="totalRecords" :rowsPerPageOptions="[10,20,30]"></Paginator>
|
||||
|
||||
<h3>Custom Template</h3>
|
||||
<Paginator :first.sync="first2" :rows="1" :totalRecords="totalRecords2" @page-change="onPageChangeCustom($event)" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink">
|
||||
<template #left>
|
||||
<Button type="button" icon="pi pi-refresh" @click="reset()"/>
|
||||
</template>
|
||||
<template #right>
|
||||
<Button type="button" icon="pi pi-search" />
|
||||
</template>
|
||||
</Paginator>
|
||||
|
||||
<div class="image-gallery">
|
||||
<img :src="'/demo/images/nature/' + image + '.jpg'" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<PaginatorDoc />
|
||||
</div>
|
||||
</template>
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="javascript">
|
||||
import PaginatorDoc from './PaginatorDoc';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
first: 0,
|
||||
rows: 10,
|
||||
totalRecords: 50,
|
||||
first2: 0,
|
||||
totalRecords2: 12,
|
||||
image: 'nature1'
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onPageChangeCustom(event) {
|
||||
this.image = 'nature' + (event.page + 1);
|
||||
},
|
||||
reset() {
|
||||
this.first2 = 0;
|
||||
this.image = 'nature1';
|
||||
}
|
||||
},
|
||||
components: {
|
||||
'PaginatorDoc': PaginatorDoc
|
||||
}
|
||||
}
|
||||
</CodeHighlight>
|
||||
|
||||
<CodeHighlight lang="css">
|
||||
.p-button.p-button-icon-only {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.image-gallery {
|
||||
text-align: center;
|
||||
padding: 1em;
|
||||
}
|
||||
</CodeHighlight>-->
|
||||
</TabPanel>
|
||||
</TabView>
|
||||
</div>
|
||||
</template>
|
||||
Loading…
Reference in New Issue