说明
本文主要实现表格的两个功能：
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: `
序号
时间
日志级别
日志内容
// 分页功能，配合相关method，实现切换页码和显示功能
`
});
如何使用-html代码
该代码除了如何使用vue组件外，还有实现了表头thead固定，只滚动表身tbody的功能。
为了方便测试，增加了选择日期查询功能获取数据显示在表格中，这部分可以用假数据替代，来验证表格是否使用正常。
再多说一句，日期控件jquery.datetimepicker真心不错，支持中文，这样设置jQuery.datetimepicker.setLocale('zh');即可(老母亲心态又犯了(⊙﹏⊙))。
该代码运行在django框架中，所以会有django特有的代码段，特此说明。
{% load static %}
分页表格和部分滚动测试代码
加载中...
效果图
分页功能可下拉菜单选择页码，也可以点击页码，还可以点击加载更多按钮。
加载更多按钮通过$emit调用父组件方法获取新数据。
table.png