Introduction
The DatatablePager is the component in charge of the pagination logic. It provides to your Datatable the current page index and the number of items to display in your table.
If you do not link a DatatablePager to your Datatable, then the table will show all rows provided at the same time.
Check out the Pager styles tutorial to see the different aspects available for the pager. You can also learn more on how to manage multiple tables with pagers on the same page.
Demo
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,
},
} );
HTML
<div id="demo-app" style="max-height: 500px;overflow-y: auto;overflow-x: hidden;">
<div class="row">
<div class="col-xs-12 form-inline">
<div class="form-group">
<label for="filter" class="sr-only">Filter</label>
<input type="text" class="form-control" v-model="filter" placeholder="Filter">
</div>
</div>
<div class="col-xs-12 table-responsive">
<datatable :columns="columns" :data="rows" :filter="filter"></datatable>
</div>
</div>
</div>