Introduction
The DatatablePager 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 Custom theme tutorial.
Demo
Short
Abbreviated
Long
Code
Javascript
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 },
],
rows: window.rows,
page: 1,
},
} );
HTML
<div id="demo-app">
<div class="row">
<div class="col-xs-3">
<div class="form-group">
<label for="filter"> </label>
<input type="text" class="form-control" v-model="filter" placeholder="Filter">
</div>
</div>
</div>
<div class="col-xs-12 table-responsive">
<datatable :columns="columns" :data="rows" :filter="filter"></datatable>
</div>
<section>
<div class="row">
<div class="col-md-4 col-xs-12">Short</div>
<div class="col-md-8 col-xs-12 pagination-no-margin"><datatable-pager v-model="page" type="short"></datatable-pager></div>
</div>
<div class="row">
<div class="col-md-4 col-xs-12">Abbreviated</div>
<div class="col-md-8 col-xs-12 pagination-no-margin"><datatable-pager v-model="page" type="abbreviated"></datatable-pager></div>
</div>
<div class="row">
<div class="col-md-4 col-xs-12">Long</div>
<div class="col-md-8 col-xs-12 pagination-no-margin"><datatable-pager v-model="page" type="long"></datatable-pager></div>
</div>
</section>
</div>