原生python实现分页器

66 阅读 0 评论 44 点赞

我是靠谱客的博主长情纸鹤，这篇文章主要介绍原生python实现分页器，现在分享给大家，希望可以做个参考。

原理：分页的底层原理就是利用了sql命令中的limit关键字，通过sql语句查询数据。

构建分页器

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# paginator.py
from utils.dataBase import MySQL
class Paginator:
"""
分页器
"""
def __init__(self, total=0, current_page=1, page_size=1):
self.total = int(total)
self.current_page = int(current_page)
self.page_size = int(page_size)
if self.page_size <= 0 or self.current_page <= 0:
self.page_size = 1
self.current_page = 1
def page_num(self):
if self.total % self.page_size == 0:
return self.total // self.page_size
else:
return self.total // self.page_size + 1
def get_data(self, sql):
_limit = (self.current_page - 1) * self.page_size
_offset = self.page_size
sql += f" limit {_limit},{_offset}"
db = MySQL()
return db.get_all(sql)

flask中使用分页器

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@course.route('/test/', methods=['GET'])
def get_course():
current_page = request.args.get("current_page", 1)
page_size = request.args.get("page_size", 1)
db = MySQL()
sql = "select count(1) as total from `course`"
result = db.get_one(sql)
# 实例化对象
p = Paginator(result['total'], current_page, page_size)
# 获取多少页
page_num = p.page_num()
# 获取数据
sql = "select * from `course` order by `id` desc"
result = p.get_data(sql)
return {"code": 200, "page_num": page_num, "data": result}

vue中使用分页器

复制代码

<template>
<div>
<table style="margin: auto;text-align: center;">
<tr>
<th>课程编号</th>
<th>课程标题</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in courses">
<td>{{item.id}}</td>
<td>{{item.title}}</td>
<td>
<van-button>删除课程</van-button>
<van-button>编辑课程</van-button>
</td>
</tr>
</table>
<div>
一共有{{ page_num }}页 , 当前页:{{ current_page }}
<ul>
<li v-show="last_page" @click="get_data(last_page)">上一页</li>
<li v-for="index in page_num">
<a @click="get_data(index)"> {{index}}</a>
</li>
<li v-show="next_page" @click="get_data(next_page)">下一页</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
courses: [],
current_page: 1,
page_size: 1,
page_num: 0,
last_page: 0,
next_page: 0,
}
},
methods: {
get_data(index) {
if (index) {
this.current_page = index
}
this.axios.get('http://127.0.0.1:5000/test/', {
params: {
'current_page': index,
'page_size': this.page_size
}
}).then(result => {
this.courses = result.data.data
this.page_num = result.data.page_num
// 判断上一页和下一页
if (index === 1) {
this.last_page = 0;
} else {
this.last_page = index - 1;
}
if (index === this.page_num) {
this.next_page = 0;
} else {
this.next_page = index + 1;
}
})
}
},
mounted() {
this.get_data()
}
}
</script>
<style scoped>
li {
display: inline-block;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<template>
<div>
<table style="margin: auto;text-align: center;">
<tr>
<th>课程编号</th>
<th>课程标题</th>
<th>操作</th>
</tr>
<tr v-for="(item,index) in courses">
<td>{{item.id}}</td>
<td>{{item.title}}</td>
<td>
<van-button>删除课程</van-button>
<van-button>编辑课程</van-button>
</td>
</tr>
</table>
<div>
一共有{{ page_num }}页 , 当前页:{{ current_page }}
<ul>
<li v-show="last_page" @click="get_data(last_page)">上一页</li>
<li v-for="index in page_num">
<a @click="get_data(index)"> {{index}}</a>
</li>
<li v-show="next_page" @click="get_data(next_page)">下一页</li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
courses: [],
current_page: 1,
page_size: 1,
page_num: 0,
last_page: 0,
next_page: 0,
}
},
methods: {
get_data(index) {
if (index) {
this.current_page = index
}
this.axios.get('http://127.0.0.1:5000/test/', {
params: {
'current_page': index,
'page_size': this.page_size
}
}).then(result => {
this.courses = result.data.data
this.page_num = result.data.page_num
// 判断上一页和下一页
if (index === 1) {
this.last_page = 0;
} else {
this.last_page = index - 1;
}
if (index === this.page_num) {
this.next_page = 0;
} else {
this.next_page = index + 1;
}
})
}
},
mounted() {
this.get_data()
}
}
</script>
<style scoped>
li {
display: inline-block;
}
</style>