說明
本文主要實現表格的兩個功能：
1.分頁功能；
2.部分滾動：即表頭thead固定，表身tbody滾動。
樣式
對樣式不敢興趣可以忽略該段，本文重點是如何實現表格的兩個功能。
為了表格美觀，使用了樣式，很多人喜歡用bootstrap，bootstrap看多了容易審美疲勞，于是用了semantic ui，對semantic ui感興趣請移步官網，該樣式清爽簡約，如春雨后的一抹柳葉條垂掛在門前，沁人心脾，暗自留香，堪稱簡約樣式的典范，值得珍藏！O(∩_∩)O哈哈~
官網：https://semantic-ui.com/introduction/getting-started.html
代碼
自定義Vue組件-分頁表格
閑話不多說，直接上xtemplates.js代碼，該js內容是自定義Vue組件，實現了分頁的功能。
Vue.component("scroll-page-table", {
props: ["results"],
data: function() {
return {
current_page_results: [],
table_page: {
current_page: 0,
page_numbers: 0,
active_number: 5,
start_number: 1,
show_tr_numbers: 50,
loading_times: 1
}
};
},
watch: {
results() {
this.resetTablePage();
this.showCurrentPageResults();
this.$nextTick(function() {
$(".ui.selection.dropdown").dropdown();
});
}
},
methods: {
send() {
this.table_page.loading_times += 1;
this.$emit("search", this.table_page.loading_times);
},
showCurrentPageResults() {
this.current_page_results = [];
var s_idx =
(this.table_page.current_page - 1) * this.table_page.show_tr_numbers;
var e_idx =
this.table_page.current_page * this.table_page.show_tr_numbers - 1;
if (e_idx >= this.results.length) e_idx = this.results.length - 1;
if (
s_idx <= e_idx &&
s_idx < this.results.length &&
e_idx < this.results.length
) {
this.current_page_results = this.results.slice(s_idx, e_idx + 1);
}
},
resetTablePage() {
this.table_page.page_numbers = Math.ceil(
this.results.length / this.table_page.show_tr_numbers
);
if (this.table_page.page_numbers <= 0) this.table_page.current_page = 0;
else if (this.table_page.loading_times == 1) {
this.table_page.current_page = 1;
this.table_page.start_number = 1;
}
},
clickFirstPage() {
if (this.table_page.page_numbers <= 0) return;
this.table_page.current_page = 1;
this.table_page.start_number = 1;
this.showCurrentPageResults();
},
clickLastPage() {
if (this.table_page.page_numbers <= 0) return;
this.table_page.current_page = this.table_page.page_numbers;
this.table_page.start_number =
this.table_page.current_page - this.table_page.active_number + 1 < 1
? 1
: this.table_page.current_page - this.table_page.active_number + 1;
this.showCurrentPageResults();
},
clickPreviousPage() {
if (this.table_page.page_numbers <= 0) return;
this.table_page.current_page =
this.table_page.current_page - 1 < 1
? 1
: this.table_page.current_page - 1;
this.table_page.start_number =
this.table_page.current_page - this.table_page.active_number + 1 < 1
? 1
: this.table_page.current_page - this.table_page.active_number + 1;
this.showCurrentPageResults();
},
clickNextPage() {
if (this.table_page.page_numbers <= 0) return;
this.table_page.current_page =
this.table_page.current_page + 1 > this.table_page.page_numbers
? this.table_page.page_numbers
: this.table_page.current_page + 1;
this.table_page.start_number =
this.table_page.current_page - this.table_page.active_number + 1 < 1
? 1
: this.table_page.current_page - this.table_page.active_number + 1;
this.showCurrentPageResults();
},
clickNumberPage(index) {
if (this.table_page.page_numbers <= 0) return;
this.table_page.current_page = index;
this.table_page.start_number =
this.table_page.current_page - this.table_page.active_number + 1 < 1
? 1
: this.table_page.current_page - this.table_page.active_number + 1;
this.showCurrentPageResults();
}
},
template: `<div class="ui grid" style="font-family: monospace;">
<div class="fourteen wide column">
<table class="ui small celled striped table scroll-tbody">
<thead>
<tr>
<th class="collapsing" style="width: 10%">
序號
</th>
<th class="collapsing" style="width: 20%">
時間
</th>
<th class="collapsing" style="width: 10%">
日志級別
</th>
<th class="collapsing">日志內容</th>
</tr>
</thead>
<tbody style="font-family: monospace;">
<template v-for="result in current_page_results">
<tr>
<td
class="collapsing"
style="width: 10%"
v-text="result.idx"
></td>
<td
class="collapsing"
style="width: 20%"
v-text="result.time"
></td>
<td
class="collapsing"
style="width: 10%"
v-text="result.level"
></td>
<td class="collapsing">
<div style="overflow:auto;" v-text="result.content"></div>
</td>
</tr>
</template>
</tbody>
<tfoot v-if="results.length>0"> // 分頁功能，配合相關method，實現切換頁碼和顯示功能
<tr>
<th colspan="5">
<div class="ui right floated pagination menu font-18 huf">
<a class="icon item" @click="send">加載更多...</a>
<a class="icon item" @click="clickFirstPage"><i
class="angle double left icon"></i></a>
<a class="icon item" @click="clickPreviousPage">
<i class="angle left icon"></i>
</a>
<div v-for="i in table_page.start_number+table_page.active_number-1<=table_page.page_numbers?table_page.start_number+table_page.active_number-1:table_page.page_numbers"
v-if="i>=table_page.start_number" >
<a class="item" v-if="i!=table_page.current_page" v-text="i"
@click="clickNumberPage(i)"></a>
<a class="active item" v-if="i==table_page.current_page" v-text="i"
@click="clickNumberPage(i)"></a>
</div>
<a class="disabled item"
v-if="table_page.start_number+table_page.active_number-1<table_page.page_numbers">...</a>
<a class="icon item" @click="clickNextPage">
<i class="angle right icon"></i>
</a>
<a class="icon item" @click="clickLastPage"><i
class="angle double right icon"></i></a>
<div class="ui selection dropdown item">
<div class="text" v-text="table_page.current_page"></div>
<i class="dropdown icon"></i>
<div class="menu">
<a v-for="j in table_page.page_numbers" class="item"
v-text="j" @click="clickNumberPage(j)"></a>
</div>
</div>
</div>
</th>
</tr>
</tfoot>
</table>
</div>
</div>
`
});
如何使用-html代碼
該代碼除了如何使用vue組件外，還有實現了表頭thead固定，只滾動表身tbody的功能。
為了方便測試，增加了選擇日期查詢功能獲取數據顯示在表格中，這部分可以用假數據替代，來驗證表格是否使用正常。
再多說一句，日期控件jquery.datetimepicker真心不錯，支持中文，這樣設置jQuery.datetimepicker.setLocale('zh');即可(老母親心態又犯了(⊙﹏⊙))。
該代碼運行在django框架中，所以會有django特有的代碼段，特此說明。
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- Standard Meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<!-- Site Properties -->
<title>分頁表格和部分滾動測試代碼</title>
<link rel="stylesheet" type="text/css" href="{% static 'net/assets/semantic.css' %}">
<link rel="stylesheet" type="text/css" href="{% static 'net/assets/jquery.datetimepicker.min.css' %}">
<!-- 固定表頭thead，滾動表身tbody的樣式 -->
<style>
.scroll-tbody thead {
display: block;
}
.scroll-tbody tbody {
display: block;
max-height: 550px;
overflow-y: scroll;
overflow-x: hidden;
}
.scroll-tbody thead tr {
display: table;
width: 100%;
table-layout: fixed;
}
.scroll-tbody tbody tr {
display: table;
width: 100%;
table-layout: fixed;
}
.scroll-tbody thead {
width: calc(100% - 1em)
}
</style>
</head>
<body>
<div id="huf_log_result">
<div class="ui">
<div class="ui form">
<div class="fields">
<div class="three wide field">
<label>開始時間</label>
<input type="text" class="search-date" id="search-from-date">
</div>
<div class="three wide field">
<label>結束時間</label>
<input type="text" class="search-date" id="search-to-date">
</div>
<div class="two wide field">
<label>查詢</label>
<button :class="search_btn_class" id="search" @click="search(1)"><i
class="search icon"></i>查詢</button>
</div>
<div v-if="message" class="three wide field">
<label style="color:#9F3A38;">提示</label>
<div style="color:#9F3A38;">
<p v-text="message"></p>
</div>
</div>
</div>
</div>
<div :class="table_loading_class">
<div class="ui text loader">加載中...</div>
</div>
<scroll-page-table :results="results" @search="search">
</scroll-page-table>
</div>
</div>
<script src="{% static 'net/assets/jquery.min.js' %}"></script>
<script src="{% static 'net/assets/semantic.min.js' %}"></script>
<script src="{% static 'net/assets/vue.js' %}"></script>
<script src="{% static 'net/assets/jquery.datetimepicker.full.min.js' %}"></script>
<script src="{% static 'net/assets/d3.v5.min.js' %}"></script>
<script src="{% static 'net/assets/xtemplates.js' %}"></script>
<script>
var data = {
results: [],
message: '',
search_btn_class: 'ui blue button',
table_loading_class: 'ui inverted dimmer',
}
var vm = new Vue({
el: '#huf_log_result',
data: data,
methods: {
search(times) {
if ($('#search-from-date').val() == '' || $('#search-to-date').val() == '') {
vm.$set(data, 'message', '請選擇開始時間和結束時間！')
return
}
var start_time_str = $('#search-from-date').val() + ':00'
var end_time_str = $('#search-to-date').val() + ':59'
var start_time = new Date(start_time_str.replace(/-/g, "/"))
var end_time = new Date(end_time_str.replace(/-/g, "/"))
if (start_time - end_time > 0) {
vm.$set(data, 'message', '開始時間必須小于結束時間！')
return
}
vm.$set(data, 'search_btn_class', 'ui blue loading button')
vm.$set(data, 'message', '')
vm.$set(data, 'table_loading_class', 'ui active inverted dimmer')
$.getHufLogArray('huf.log', $('#search-from-date').val() + ':00', $('#search-to-date').val() + ':59', times, function (res) {
if (res && res.ret) {
if ('results' in res.ret) {
vm.$set(data, 'results', res.ret.results)
}
vm.$set(data, 'search_btn_class', 'ui blue button')
vm.$set(data, 'table_loading_class', 'ui inverted dimmer')
}
}, function (res) {
vm.$set(data, 'search_btn_class', 'ui blue button')
})
},
}
})
$(document).ready(function () {
jQuery.datetimepicker.setLocale('zh');
$('#search-from-date, #search-to-date').datetimepicker({
format: 'Y-m-d H:i',
});
})
</script>
</body>
</html>
效果圖
分頁功能可下拉菜單選擇頁碼，也可以點擊頁碼，還可以點擊加載更多按鈕。
加載更多按鈕通過$emit調用父組件方法獲取新數據。
table.png
