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">&nbsp;</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>