Pager types | vuejs-datatable

Introduction

The VueDatatablePager allows you to customize the overall appearance of the paging, using the type property. If this property isn't set, it fallbacks to long.

To customize further the classes & HTML content of the table type, please see the tutorial about custom themes.

Demo

Code

Typescript

import Vue from 'vue';
import { TColumnsDefinition } from 'vuejs-datatable';

import { IPeople } from '../utils';

declare var rows: IPeople[];
const app = new Vue( {
    el:   '#demo-app',
    data: {
        filter:  '',
        columns: [
            { label: 'ID', field: 'id', align: 'center', filterable: false },
            { label: 'Username', field: 'user.username' },
            { label: 'First Name', field: 'user.first_name' },
            { label: 'Last Name', field: 'user.last_name' },
            { label: 'Email', field: 'user.email', align: 'right', sortable: false },
            { label: 'Address', representedAs: row => `${ row.address  }, ${  row.city  }, ${  row.state }`, align: 'right', sortable: false },
        ] as TColumnsDefinition<IPeople>,
        rows,
        page: 1,
    },
} );

HTML

<div id="demo-app">
    <div class="row">
        <div class="col-xs-3">
            <div class="form-group">
                <label for="filter">&nbsp;</label>
                <input type="text" class="form-control" v-model="filter" placeholder="Filter" @keydown="$event.stopImmediatePropagation()">
            </div>
        </div>
    </div>
    <div class="col-xs-12 table-responsive">
        <datatable :columns="columns" :data="rows" :filter="filter" :per-page="10"></datatable>
    </div>
    <section class="pagers-table">
        <label>Short</label>
        <datatable-pager v-model="page" type="short"></datatable-pager>

        <label>Abbreviated</label>
        <datatable-pager v-model="page" type="abbreviated"></datatable-pager>

        <label>Long</label>
        <datatable-pager v-model="page" type="long"></datatable-pager>
    </section>
</div>