background
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 50, 100]"
:page-size="pagesize"
layout="total, sizes, prev, pager, next"
:total="filterData.length">
var app7 = new Vue({
el: '#table',
data: {
tableData: [],
filtData:[],
input: "",
height: 500,
currentPage:1,
pagesize:20
},
// created() {
// $.get("selectBtTable.php?action=init_data_list", data=>{
// alert("hi")
// this.tableData = JSON.parse(data);
// console.log(this.tableData)
// //轉換資料類型
// // $.each(this.tableData3, function(index, item) {
// // this.id = Number(this.id)
// // })
// })
// },
computed: {
filterData: function() {
var input = this.input && this.input.toLowerCase()
var items = this.tableData
var items1
if (input) {
items1 = items.filter(function(item) {
//console.log(Object.keys(item))
//return item.country.toLowerCase().match(searchContent);
//Object.keys(item)周遊item對象裡面的鍵值是否符合回調函數的測試，通過測試則傳回true，否則為false。
return Object.keys(item).some(function(key1) {
return String(item[key1]).toLowerCase().match(input)
})
})
} else {
items1 = this.tableData
}
return items1
}
},
created() {
this.getData();
this.intervalGetData();
},
mounted() {
},
methods: {
intervalGetData() {
var that = this;
setInterval(function() {
// $.get("selectBtTable.php?action=init_data_list", data => {
// var data = JSON.parse(data);
// this.message = data;
// $('#tableTest1').bootstrapTable('load', this.message);
// //console.log(JSON.parse(data))
// console.log("get data")
// })
that.getData();
}, 3000)
},
getData() {
//es6 箭頭函數的寫法
// $.get("selectBtTable.php?action=init_data_list", data => {
// var data = JSON.parse(data);
// this.message = data;
// $('#tableTest1').bootstrapTable('load', this.message);
// console.log("init data")
// })
var that = this;
$.get("selectBtTable.php?action=init_data_list", function(data) {
var data = JSON.parse(data);
that.tableData = data;
//轉換資料類型
$.each(that.tableData, function(index, item) {
this.id = Number(this.id)
})
})
},
handleSizeChange: function (size) {
this.pagesize = size;
},
handleCurrentChange: function(currentPage){
this.currentPage = currentPage;
}
},
})