在vue框架中：
https://mp.weixin.qq.com/s/oHRYOm12xZBLFVC0kH44EQ
在mako框架中：
<%inherit file="/base.html"/>
<%block name="content">
<div id="app">
<Page :total="total_number" show-sizer :page-size="per_size" :page-size-opts="page_size_array"
@on-change="page_change" @on-page-size-change="page_size_change"/>
</div>
</%block>
<script>
Vue.prototype.$http = axios;
Vue.use(iview);
new Vue({
el: '#app',
data() {
return {
per_size: 5,
page_size_array: [5, 10, 15, 20],
total_number: 100,
current_page: 1,
}
},
methods: {
page_change(value) {
this.current_page = value
this.$http.post('${SITE_URL}search_info_by_page/', {page: value, per_size: this.per_size}).then(res => {
if (res.data.result) {
//這里就是要展示數(shù)據(jù)的表格
this.data6 = res.data.message
} else {
this.$Message.error(res.data.message)
}
})
},
//每次更換每頁多少條數(shù)據(jù)時，如果當(dāng)前頁數(shù)為1铸豁，那么不會調(diào)用page_change，如果當(dāng)前頁數(shù)不為1瓜饥，那么會調(diào)用page_change拢驾，置為1
page_size_change(value) {
this.per_size = value
if (this.current_page === 1) {
this.$http.post(`search_info_by_page/`, {page: this.current_page, per_size: value}).then(res => {
if (res.data.result) {
//這里就是要展示數(shù)據(jù)的表格
this.data6 = res.data.message
} else {
this.$Message.error(res.data.message)
}
})
} else {
}
},
},
mounted() {
}
})
</script>
<style></style>
