DONE: remove verified by ajk, fix bug on pagination, improve UI
This commit is contained in:
ISMAIL MASSERAN
@@ -1,57 +1,57 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h3><b>Tambah Jawatan</b></h3>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="name">Jawatan</label>
|
||||
<input type="text" name="name" class="form-control" required/>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h3><b>Tambah Sesi</b></h3>
|
||||
<form>
|
||||
<div class="form-group">
|
||||
<label for="name">Jawatan</label>
|
||||
<input type="text" name="name" class="form-control" required />
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<input type="button" value="Submit" class="btn btn-info"/>
|
||||
<input type="reset" value="Reset" class="btn btn-default"/>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<datatable v-bind="data" />
|
||||
<div class="form-group">
|
||||
<input type="button" value="Submit" class="btn btn-info" />
|
||||
<input type="reset" value="Reset" class="btn btn-default" />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-8">
|
||||
<datatable v-bind="data" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
export default {
|
||||
data: () => ({
|
||||
yyy : [
|
||||
{id: 1, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 2, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 3, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 4, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 5, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 6, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 7, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 8, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 9, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 10, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 11, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 12, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 13, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 14, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 15, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 16, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 17, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'},
|
||||
{id: 18, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>'}
|
||||
yyy: [
|
||||
{ id: 1, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 2, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 3, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 4, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 5, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 6, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 7, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 8, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 9, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 10, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 11, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 12, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 13, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 14, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 15, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 16, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 17, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' },
|
||||
{ id: 18, name: 'Sample Data', x: 'Sample Data', btn: '<button @click="log" class="btn btn-info">Click me</button>' }
|
||||
],
|
||||
|
||||
data: {
|
||||
columns: [
|
||||
{title:'ID', field: 'id'},
|
||||
{title:'name', field: 'name'},
|
||||
{title:'x', field:'x'},
|
||||
{title:'', field:'btn', html: true}
|
||||
{ title: 'ID', field: 'id' },
|
||||
{ title: 'name', field: 'name' },
|
||||
{ title: 'x', field: 'x' },
|
||||
{ title: '', field: 'btn', html: true }
|
||||
],
|
||||
data: [],
|
||||
|
||||
@@ -70,9 +70,9 @@ export default{
|
||||
console.log(this);
|
||||
},
|
||||
|
||||
watch : {
|
||||
watch: {
|
||||
'data.query': {
|
||||
handler (query) {
|
||||
handler(query) {
|
||||
this.data.data = this.xxx;
|
||||
this.data.total = this.yyy.length;
|
||||
},
|
||||
@@ -82,10 +82,10 @@ export default{
|
||||
},
|
||||
|
||||
computed: {
|
||||
xxx : function () {
|
||||
xxx: function () {
|
||||
var offset = this.data.query.offset; //0
|
||||
var limit = this.data.query.limit; //10
|
||||
return this.yyy.slice(offset, offset+limit);
|
||||
return this.yyy.slice(offset, offset + limit);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user