Introduction
Datatable and pager can be associated with each other using the Datatable.name & DatatablePager.table property. Simply set the same value for both properties, and the pager will control the associated table.
Check out the Pager styles tutorial to see the different aspects available for the pager.
If the relation between the table and the pager is broken, the table will be displayed in no pager mode.
Demo
Code
Javascript
new Vue( {
el: '#demo-app',
data: {
filter: '',
filter2: '',
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,
page2: 1,
},
computed: {
tables: () => Vue.$datatables,
},
} );
HTML
<div id="demo-app">
<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>
<datatable-pager v-model="page"></datatable-pager>
</div>
</div>
<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="filter2" placeholder="Filter">
</div>
</div>
<div class="col-xs-12 table-responsive">
<datatable name="second" :columns="columns" :data="rows" :filter="filter2"></datatable>
<datatable-pager table="second" v-model="page2"></datatable-pager>
</div>
</div>
</div>