Complete vue-datasource
This commit is contained in:
parent
6f28eb0c1a
commit
512566e990
|
@ -9,6 +9,7 @@
|
|||
"build": "node build/build.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^0.15.3",
|
||||
"element-ui": "^1.1.6",
|
||||
"vue": "^2.1.10",
|
||||
"vue-datasource": "^1.0.4",
|
||||
|
|
|
@ -18,40 +18,14 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import axios from 'axios';
|
||||
import Datasource from 'vue-datasource';
|
||||
export default {
|
||||
data: function(){
|
||||
return {
|
||||
information: {
|
||||
pagination: {
|
||||
total: 25, // Number of total rows (default 0)
|
||||
per_page: 15, // Number of rows to show (default 15)
|
||||
current_page: 1, // Actual page
|
||||
last_page: 2, // Last page
|
||||
from: 1, // Beginning of visible rows
|
||||
to: 15 // End of visible rows
|
||||
},
|
||||
data: [{
|
||||
"id": 1,
|
||||
"name": "Jaylen Schmidt",
|
||||
"email": "aheaney@example.org",
|
||||
"city": "Conroyburgh",
|
||||
"company": "Kunde, Gerhold and Runte"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Ms. Desiree Franecki III",
|
||||
"email": "pweissnat@example.net",
|
||||
"city": "New Mathew",
|
||||
"company": "Davis Ltd"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Clyde Corwin",
|
||||
"email": "rolfson.lexus@example.com",
|
||||
"city": "East Ron",
|
||||
"company": "Zieme and Sons"
|
||||
}]
|
||||
pagination:{},
|
||||
data:[]
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
|
@ -73,11 +47,10 @@
|
|||
],
|
||||
actions: [
|
||||
{
|
||||
text: 'Click me', // Button label
|
||||
icon: 'glyphicon glyphicon-check', // Button icon
|
||||
class: 'btn-primary', // Button class (background color)
|
||||
event(e, row) { // Event handler callback. Gets event instace and selected row
|
||||
console.log('Click row: ', row); // If no row is selected, row will be NULL
|
||||
text: 'Click',
|
||||
class: 'btn-primary',
|
||||
event(e, row) {
|
||||
alert('Click row: ' + row.row.id);
|
||||
}
|
||||
}
|
||||
],
|
||||
|
@ -105,6 +78,12 @@
|
|||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
beforeMount(){
|
||||
axios.get('../../../static/data.json').then( (res) => {
|
||||
console.log(res.data)
|
||||
this.information = res.data;
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
@ -100,6 +100,9 @@
|
|||
.vue-datasource .table-striped > tbody > tr:nth-of-type(odd) {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.vue-datasource .success th ,.vue-datasource .success td{
|
||||
background-color: #dff0d8;
|
||||
}
|
||||
.vue-datasource .pagination {
|
||||
display: inline-block;
|
||||
padding-left: 0;
|
||||
|
|
|
@ -0,0 +1,162 @@
|
|||
{
|
||||
"pagination": {
|
||||
"total": 15,
|
||||
"per_page": 15,
|
||||
"current_page": 1,
|
||||
"last_page": 1,
|
||||
"from": 1,
|
||||
"to": 15
|
||||
},
|
||||
"data": [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "Jaylen Schmidt",
|
||||
"email": "aheaney@example.org",
|
||||
"city": "Conroyburgh",
|
||||
"company": "Kunde, Gerhold and Runte",
|
||||
"job": "Soil Scientist",
|
||||
"created_at": "2017-01-13 19:17:16",
|
||||
"updated_at": "2017-01-13 19:17:16"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "Ms. Desiree Franecki III",
|
||||
"email": "pweissnat@example.net",
|
||||
"city": "New Mathew",
|
||||
"company": "Davis Ltd",
|
||||
"job": "Customer Service Representative",
|
||||
"created_at": "2017-01-13 19:17:16",
|
||||
"updated_at": "2017-01-13 19:17:16"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "Clyde Corwin",
|
||||
"email": "rolfson.lexus@example.com",
|
||||
"city": "East Ron",
|
||||
"company": "Zieme and Sons",
|
||||
"job": "Claims Taker",
|
||||
"created_at": "2017-01-13 19:17:16",
|
||||
"updated_at": "2017-01-13 19:17:16"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "Mr. Tyrese Kuphal",
|
||||
"email": "libby.heaney@example.com",
|
||||
"city": "Cristianland",
|
||||
"company": "Abernathy LLC",
|
||||
"job": "Occupational Health Safety Technician",
|
||||
"created_at": "2017-01-13 19:17:16",
|
||||
"updated_at": "2017-01-13 19:17:16"
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"name": "Ms. Amya West PhD",
|
||||
"email": "uheller@example.org",
|
||||
"city": "Treutelmouth",
|
||||
"company": "Mraz-Effertz",
|
||||
"job": "Hazardous Materials Removal Worker",
|
||||
"created_at": "2017-01-13 19:17:16",
|
||||
"updated_at": "2017-01-13 19:17:16"
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"name": "Murphy Stamm IV",
|
||||
"email": "ckautzer@example.com",
|
||||
"city": "Myleneshire",
|
||||
"company": "Sporer-Wolf",
|
||||
"job": "Pipelaying Fitter",
|
||||
"created_at": "2017-01-13 19:17:16",
|
||||
"updated_at": "2017-01-13 19:17:16"
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"name": "Elsa Jast",
|
||||
"email": "kaitlyn.lang@example.net",
|
||||
"city": "Mariahstad",
|
||||
"company": "Hackett LLC",
|
||||
"job": "Record Clerk",
|
||||
"created_at": "2017-01-13 19:17:16",
|
||||
"updated_at": "2017-01-13 19:17:16"
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"name": "Hardy Mosciski DVM",
|
||||
"email": "soledad44@example.net",
|
||||
"city": "Jasminborough",
|
||||
"company": "Haley Ltd",
|
||||
"job": "Kindergarten Teacher",
|
||||
"created_at": "2017-01-13 19:17:16",
|
||||
"updated_at": "2017-01-13 19:17:16"
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"name": "Demarcus Littel",
|
||||
"email": "americo84@example.com",
|
||||
"city": "New Lilaton",
|
||||
"company": "Satterfield Group",
|
||||
"job": "Plant Scientist",
|
||||
"created_at": "2017-01-13 19:17:16",
|
||||
"updated_at": "2017-01-13 19:17:16"
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"name": "Dr. Shad Gleichner",
|
||||
"email": "eleanora23@example.com",
|
||||
"city": "Lake Whitneyberg",
|
||||
"company": "Fay Group",
|
||||
"job": "Rotary Drill Operator",
|
||||
"created_at": "2017-01-13 19:17:16",
|
||||
"updated_at": "2017-01-13 19:17:16"
|
||||
},
|
||||
{
|
||||
"id": 11,
|
||||
"name": "Milford Mann",
|
||||
"email": "shartmann@example.net",
|
||||
"city": "Lake Austinport",
|
||||
"company": "Sporer-Langosh",
|
||||
"job": "Social and Human Service Assistant",
|
||||
"created_at": "2017-01-13 19:17:16",
|
||||
"updated_at": "2017-01-13 19:17:16"
|
||||
},
|
||||
{
|
||||
"id": 12,
|
||||
"name": "Prof. Mustafa Lindgren Sr.",
|
||||
"email": "lizeth.morissette@example.net",
|
||||
"city": "Roweborough",
|
||||
"company": "Mitchell-Ratke",
|
||||
"job": "Shoe Machine Operators",
|
||||
"created_at": "2017-01-13 19:17:16",
|
||||
"updated_at": "2017-01-13 19:17:16"
|
||||
},
|
||||
{
|
||||
"id": 13,
|
||||
"name": "Mrs. Brittany Bode Sr.",
|
||||
"email": "wiegand.mozelle@example.org",
|
||||
"city": "South Maxwellville",
|
||||
"company": "Reilly Inc",
|
||||
"job": "Bridge Tender OR Lock Tender",
|
||||
"created_at": "2017-01-13 19:17:16",
|
||||
"updated_at": "2017-01-13 19:17:16"
|
||||
},
|
||||
{
|
||||
"id": 14,
|
||||
"name": "Dariana Bauch",
|
||||
"email": "dessie.schamberger@example.net",
|
||||
"city": "East Linnie",
|
||||
"company": "Wuckert PLC",
|
||||
"job": "Elementary and Secondary School Administrators",
|
||||
"created_at": "2017-01-13 19:17:16",
|
||||
"updated_at": "2017-01-13 19:17:16"
|
||||
},
|
||||
{
|
||||
"id": 15,
|
||||
"name": "Jalon Renner",
|
||||
"email": "lulu45@example.net",
|
||||
"city": "New Rashad",
|
||||
"company": "Muller-Kuhn",
|
||||
"job": "Manufactured Building Installer",
|
||||
"created_at": "2017-01-13 19:17:16",
|
||||
"updated_at": "2017-01-13 19:17:16"
|
||||
}
|
||||
]
|
||||
}
|
Loading…
Reference in New Issue