PIXNET Logo登入

Bug倉庫 // 程式日記

跳到主文

Bug倉庫 // 程式日記已經搬家到 https://bugswarehouse.blogspot.tw/ 了喔

部落格全站分類：數位生活

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 2月 15 週四 201823:18

  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/

部落格搬家囉！  
網址：https://bugswarehouse.blogspot.tw/
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：
▲top
  • 2月 15 週四 201823:18

  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/

部落格搬家囉！  
網址：https://bugswarehouse.blogspot.tw/
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(33)

  • 個人分類：
▲top
  • 1月 21 週日 201823:11

  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<style>
.pagination li a,th,.input-group-addon{
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<table class="table">
<thead>
<tr>
<th v-for="column in showColumns" @click="sortBy(column)">
<span>{{ column }}</span>
<span v-if="sortByColumn == column">{{ directionSignal }}</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in thisPageShow">
<td v-for="column in showColumns">
<span>{{ item[column] }}</span>
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-md-6">
<ul class="pagination">
<li v-if="nowPage!=1 && totalPage>1">
<a @click.prevent="changePage(nowPage-1)"><</a>
</li>
<li v-for="page in pageNumber" :class="[page == nowPage ? 'active' : undefined]">
<a @click.prevent="changePage(page)">{{ page }}</a>
</li>
<li v-if="nowPage!=totalPage && totalPage>1">
<a @click.prevent="changePage(nowPage+1)">></a>
</li>
</ul>
</div>
<div class="col-md-3">
<select class="form-contorl" v-model="searchColumn">
<option v-for="column in showColumns">{{ column }}</option>
</select>
<div class="input-group">
<input type="text" class="form-control" v-model="searchInput">
<span class="input-group-addon" @click="searchTable">Search</span>
<span class="input-group-addon" @click="clearSearch">Clear</span>
</div>
</div>
<div class="col-md-3">
<div class="btn-group">
<button type="button" class="btn btn-primary" @click="whereQuery('gender','male')" :class="[whereQueryActive == 'male' ? 'active' : undefined]">male</button>
<button type="button" class="btn btn-primary" @click="whereQuery('gender','female')" :class="[whereQueryActive == 'female' ? 'active' : undefined]">female</button>
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
allDatas:[],
allDatasBackup:[],
perPage:10,
dataAfterCut:[],
totalPage:0,
thisPageShow:[],
nowPage:1,
offset:4,
firstPage:1,
lastPage:10,
showColumns:['cell','dob','email','gender'],
direction:'asc',
sortByColumn:'cell',
searchColumn:'cell',
searchInput:'',
whereQueryActive:''
},
created() {
this.fetchData();
},
computed:{
pageNumber() {
var arr = [];
for (let i = this.firstPage; i <= this.lastPage; i++) {
arr.push(i);
}
return arr;
},
directionSignal() {
if(this.direction == 'asc'){
return '↑';
}else if(this.direction == 'desc'){
return '↓';
}
},
},
methods:{
fetchData() {
var vm = this;
axios.get('https://randomuser.me/api/?results=300').then(function(rs){
vm.allDatasBackup = rs.data.results;
vm.allDatas = rs.data.results;
vm.setInitPage();
vm.cutArray();
});
},
cutArray() {
var vm = this;
vm.dataAfterCut = [];
for (let i = 0; i < vm.totalPage; i++) {
vm.dataAfterCut[i] = [];
vm.dataAfterCut[i].push(vm.allDatas.slice(vm.perPage * i, vm.perPage * (i + 1)));
}
vm.thisPageShow = vm.dataAfterCut[0][0];
},
setInitPage() {
var vm = this;
vm.totalPage = Math.ceil(vm.allDatas.length / vm.perPage);
if (vm.totalPage > vm.offset * 2 + 1) {
vm.lastPage = vm.offset * 2 + 1;
} else {
vm.lastPage = vm.totalPage;
}
},
changePage(page) {
this.thisPageShow = this.dataAfterCut[page-1][0];
this.nowPage = page;
if(this.nowPage+this.offset*2 >=this.lastPage){
this.firstPage = this.nowPage - this.offset;
this.lastPage = this.nowPage + this.offset;
}
//最後一頁的頁碼設定
if(this.firstPage > this.totalPage - this.offset * 2 ){
this.firstPage = this.totalPage - this.offset * 2;
this.lastPage = this.totalPage;
}
//不要變成負數
if(this.firstPage <1){ this.firstPage = 1};
//第一頁的頁碼設定
if(this.lastPage<this.offset *2+1){this.lastPage = this.offset*2 +1};
//不要超出最大頁碼
if(this.lastPage > this.totalPage){ this.lastPage = this.totalPage};
},
sortBy(column) {
this.sortByColumn = column;
if(this.direction == 'asc'){
this.direction = 'desc';
}else{
this.direction = 'asc';
}
this.allDatas = _.orderBy(this.allDatas,column,this.direction);
this.cutArray();
},
searchTable() {
this.allDatas = _.cloneDeep(this.allDatasBackup);
this.allDatas = this.allDatas.filter(rs=>rs[this.searchColumn].indexOf(this.searchInput)!=-1);
this.reArrangeData();
},
clearSearch() {
this.allDatas = _.cloneDeep(this.allDatasBackup);
this.searchInput = '';
this.setInitPage();
this.cutArray();
this.changePage(1);
},
whereQuery(type,value) {
this.allDatas = _.cloneDeep(this.allDatasBackup);
this.allDatas = this.allDatas.filter(rs => rs[type] == value);
this.reArrangeData();
this.whereQueryActive = value;
},
reArrangeData() {
this.whereQueryActive = '';
this.dataAfterCut = [];
this.thisPageShow = [];
this.firstPage = 1;
this.lastPage = 1;
this.totalPage = 1;
if (this.allDatas.length > 0) {
this.setInitPage();
this.cutArray();
this.changePage(1);
}
}
}
});
Vue.config.devtools = true;
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：Vue.js
▲top
  • 1月 21 週日 201823:11

  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<style>
.pagination li a,th,.input-group-addon{
cursor: pointer;
}
</style>
</head>
<body>
<div id="app">
<table class="table">
<thead>
<tr>
<th v-for="column in showColumns" @click="sortBy(column)">
<span>{{ column }}</span>
<span v-if="sortByColumn == column">{{ directionSignal }}</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in thisPageShow">
<td v-for="column in showColumns">
<span>{{ item[column] }}</span>
</td>
</tr>
</tbody>
</table>
<div class="row">
<div class="col-md-6">
<ul class="pagination">
<li v-if="nowPage!=1 && totalPage>1">
<a @click.prevent="changePage(nowPage-1)"><</a>
</li>
<li v-for="page in pageNumber" :class="[page == nowPage ? 'active' : undefined]">
<a @click.prevent="changePage(page)">{{ page }}</a>
</li>
<li v-if="nowPage!=totalPage && totalPage>1">
<a @click.prevent="changePage(nowPage+1)">></a>
</li>
</ul>
</div>
<div class="col-md-3">
<select class="form-contorl" v-model="searchColumn">
<option v-for="column in showColumns">{{ column }}</option>
</select>
<div class="input-group">
<input type="text" class="form-control" v-model="searchInput">
<span class="input-group-addon" @click="searchTable">Search</span>
<span class="input-group-addon" @click="clearSearch">Clear</span>
</div>
</div>
<div class="col-md-3">
<div class="btn-group">
<button type="button" class="btn btn-primary" @click="whereQuery('gender','male')" :class="[whereQueryActive == 'male' ? 'active' : undefined]">male</button>
<button type="button" class="btn btn-primary" @click="whereQuery('gender','female')" :class="[whereQueryActive == 'female' ? 'active' : undefined]">female</button>
</div>
</div>
</div>
</div>
<script>
var app = new Vue({
el:'#app',
data:{
allDatas:[],
allDatasBackup:[],
perPage:10,
dataAfterCut:[],
totalPage:0,
thisPageShow:[],
nowPage:1,
offset:4,
firstPage:1,
lastPage:10,
showColumns:['cell','dob','email','gender'],
direction:'asc',
sortByColumn:'cell',
searchColumn:'cell',
searchInput:'',
whereQueryActive:''
},
created() {
this.fetchData();
},
computed:{
pageNumber() {
var arr = [];
for (let i = this.firstPage; i <= this.lastPage; i++) {
arr.push(i);
}
return arr;
},
directionSignal() {
if(this.direction == 'asc'){
return '↑';
}else if(this.direction == 'desc'){
return '↓';
}
},
},
methods:{
fetchData() {
var vm = this;
axios.get('https://randomuser.me/api/?results=300').then(function(rs){
vm.allDatasBackup = rs.data.results;
vm.allDatas = rs.data.results;
vm.setInitPage();
vm.cutArray();
});
},
cutArray() {
var vm = this;
vm.dataAfterCut = [];
for (let i = 0; i < vm.totalPage; i++) {
vm.dataAfterCut[i] = [];
vm.dataAfterCut[i].push(vm.allDatas.slice(vm.perPage * i, vm.perPage * (i + 1)));
}
vm.thisPageShow = vm.dataAfterCut[0][0];
},
setInitPage() {
var vm = this;
vm.totalPage = Math.ceil(vm.allDatas.length / vm.perPage);
if (vm.totalPage > vm.offset * 2 + 1) {
vm.lastPage = vm.offset * 2 + 1;
} else {
vm.lastPage = vm.totalPage;
}
},
changePage(page) {
this.thisPageShow = this.dataAfterCut[page-1][0];
this.nowPage = page;
if(this.nowPage+this.offset*2 >=this.lastPage){
this.firstPage = this.nowPage - this.offset;
this.lastPage = this.nowPage + this.offset;
}
//最後一頁的頁碼設定
if(this.firstPage > this.totalPage - this.offset * 2 ){
this.firstPage = this.totalPage - this.offset * 2;
this.lastPage = this.totalPage;
}
//不要變成負數
if(this.firstPage <1){ this.firstPage = 1};
//第一頁的頁碼設定
if(this.lastPage<this.offset *2+1){this.lastPage = this.offset*2 +1};
//不要超出最大頁碼
if(this.lastPage > this.totalPage){ this.lastPage = this.totalPage};
},
sortBy(column) {
this.sortByColumn = column;
if(this.direction == 'asc'){
this.direction = 'desc';
}else{
this.direction = 'asc';
}
this.allDatas = _.orderBy(this.allDatas,column,this.direction);
this.cutArray();
},
searchTable() {
this.allDatas = _.cloneDeep(this.allDatasBackup);
this.allDatas = this.allDatas.filter(rs=>rs[this.searchColumn].indexOf(this.searchInput)!=-1);
this.reArrangeData();
},
clearSearch() {
this.allDatas = _.cloneDeep(this.allDatasBackup);
this.searchInput = '';
this.setInitPage();
this.cutArray();
this.changePage(1);
},
whereQuery(type,value) {
this.allDatas = _.cloneDeep(this.allDatasBackup);
this.allDatas = this.allDatas.filter(rs => rs[type] == value);
this.reArrangeData();
this.whereQueryActive = value;
},
reArrangeData() {
this.whereQueryActive = '';
this.dataAfterCut = [];
this.thisPageShow = [];
this.firstPage = 1;
this.lastPage = 1;
this.totalPage = 1;
if (this.allDatas.length > 0) {
this.setInitPage();
this.cutArray();
this.changePage(1);
}
}
}
});
Vue.config.devtools = true;
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(1,293)

  • 個人分類：Vue.js
▲top
  • 10月 07 週六 201713:01

  • 使用laravel內建的vue componet


1.注意：node.js要是6版
2.laravel要是5.3版
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：Laravel
▲top
  • 10月 07 週六 201713:01

  • 使用laravel內建的vue componet


1.注意：node.js要是6版
2.laravel要是5.3版
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(71)

  • 個人分類：Laravel
▲top
  • 10月 04 週三 201722:02

  • Vuetify


1.安裝node.js
這樣才能run npm
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：Vue.js
▲top
  • 10月 04 週三 201722:02

  • Vuetify


1.安裝node.js
這樣才能run npm
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(686)

  • 個人分類：Vue.js
▲top
  • 10月 04 週三 201721:58

  • VS code安裝後相關


1.更改為英文版
https://dotblogs.com.tw/onecentlin/2016/04/15/vscode-change-ui-locale
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：開發工具相關
▲top
  • 10月 04 週三 201721:58

  • VS code安裝後相關


1.更改為英文版
https://dotblogs.com.tw/onecentlin/2016/04/15/vscode-change-ui-locale
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(16)

  • 個人分類：開發工具相關
▲top
12...37»

文章搜尋

文章搜尋

文章分類

toggle 伺服器架設 (1)
  • AWS (2)
toggle 伺服器架設 (1)
  • AWS (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle 後端框架 (1)
  • Laravel (26)
toggle 後端框架 (1)
  • Laravel (26)
  • 自學資源 (1)
  • 自學資源 (1)
  • 未分類文章 (1)

文章分類

toggle 伺服器架設 (1)
  • AWS (2)
toggle 伺服器架設 (1)
  • AWS (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle 後端框架 (1)
  • Laravel (26)
toggle 後端框架 (1)
  • Laravel (26)
  • 自學資源 (1)
  • 自學資源 (1)
  • 未分類文章 (1)

最新文章

  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 使用laravel內建的vue componet
  • 使用laravel內建的vue componet
  • Vuetify
  • Vuetify
  • VS code安裝後相關
  • VS code安裝後相關

最新文章

  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 使用laravel內建的vue componet
  • 使用laravel內建的vue componet
  • Vuetify
  • Vuetify
  • VS code安裝後相關
  • VS code安裝後相關

個人資訊

Jerry
暱稱：
Jerry
分類：
數位生活
好友：
累積中
地區：

個人資訊

Jerry
暱稱：
Jerry
分類：
數位生活
好友：
累積中
地區：

文章精選

文章精選

熱門文章

  • (1,572)用vue寫購物車（小計、總計、數量計算）
  • (871)使用jQuery的$.ajax方法，實作載入中、載入成功、載入失敗等狀況
  • (716)jQuery摺疊面板，運用on、next、slideToggle
  • (474)用js寫一個時鐘，用Date物件
  • (388)Autoprefixer CSS 自動加前綴工具（以符合各瀏覽器）
  • (44)過濾器，排列方式依據名稱字首，1與-1切換升冪與降冪
  • (43)createElement、createTextNode、appendChild，動態新增元素組合技
  • (13)Laravel，view視圖
  • (7)childNode和nodeValue，我的html是一棵樹，啊哩啊紮都是節點
  • (3)on綁定傳入四個參數，事件物件的type和data.自定義

熱門文章

  • (1,572)用vue寫購物車（小計、總計、數量計算）
  • (871)使用jQuery的$.ajax方法，實作載入中、載入成功、載入失敗等狀況
  • (716)jQuery摺疊面板，運用on、next、slideToggle
  • (474)用js寫一個時鐘，用Date物件
  • (388)Autoprefixer CSS 自動加前綴工具（以符合各瀏覽器）
  • (44)過濾器，排列方式依據名稱字首，1與-1切換升冪與降冪
  • (43)createElement、createTextNode、appendChild，動態新增元素組合技
  • (13)Laravel，view視圖
  • (7)childNode和nodeValue，我的html是一棵樹，啊哩啊紮都是節點
  • (3)on綁定傳入四個參數，事件物件的type和data.自定義

最新留言

    最新留言

      動態訂閱

      動態訂閱

      誰來我家

      誰來我家

      參觀人氣

      • 本日人氣：
      • 累積人氣：

      參觀人氣

      • 本日人氣：
      • 累積人氣：