概念
本文在上一篇文章基础之前进行构建和完善
账户信息的分页显示
用户通过点击首页的“查询账户”，进入账户信息查询页面
则点击该按钮触发点击事件，向django服务器发出请求
接着我们在urls.py中需要定义与该地址进行匹配的地址，并匹配后跳转至views.py文件中执行对应该功能的方法
views.py
# 创建方法，用于从数据库中查询出所有的账户信息
# 将所有信息发送给展示列表信息的页面
def getAccountList(request):
#当前要显示第几页的数据，由用户决定
#获得用户使用get请求发送过来的页码参数
# 对获得页码参数的代码进行捕获异常
try:
ym = request.GET["ym"]
except:
# 只要以上代码报错，那么就会执行这里面的代码
# 上面的代码报错的原因是因为没有获得ym这个参数
# ym默认设置为1
ym=1
# 查询Account表中所有数据,将数据转换成字典的格式
accounts=Account.objects.all().values()
# [
# {'id': 1, 'password': '666666',
# 'name': '马云', 'personId': '360105197204171611',
# 'blance': 2000.12, 'openDate': '2022-10-20'},
# {'id': 2, 'password': '888888',
# 'name': '雷军', 'personId': '360105197807181615',
# 'blance': 61235.78, 'openDate': '2021-12-10'},
# {'id': 3, 'password': '999999',
# 'name': '马斯克', 'personId': '360105198010181604',
# 'blance': 548976.11, 'openDate': '2018-1-16'}
# ]
# 创建分页器对象,
# 第一个参数表示从数据库中查询出来的总数据
# 第二个参数表示设置每页显示多少条数据
p=Paginator(accounts,10)
# 从分页器中根据当前页码来获得当前页的对象
page=p.get_page(ym)
#从当前页对象中获得出数据列表
accounts=page.object_list
# 获得所有分页的总页数的迭代器
yms=p.page_range
return render(request,"accountList.html",{"accounts":accounts,"page":page,"yms":yms})根据该代码，可理解，通过浏览器给定页码，进行获取对应的页码的列表数据发送给浏览器上进行展示，如果浏览器未指定页码，则服务器默认获取第一页的数据发送给浏览器，因此我们需要创建展示列表信息的html页面，其代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>账户信息列表页面</title>
<style type="text/css">
table{
border-width: 0px;
background-color: cadetblue;
padding: 10px;
width: 900px;
text-align: center;
border-radius: 10px;
clear: right;
}
input{
width: 60px;
padding: 5px;
border-width: 0px;
border-radius: 5px;
color: white;
}
input.btn_up{
background-color: #4bede4;
}
input.btn_del{
background-color: #ff5860;
float: right;
margin-bottom: 10px;
width: 100px;
}
input.btn_up:hover{
background-color:#16DCED ;
}
input.btn_del:hover{
background-color: #FF1719;
}
td{
padding: 5px;
}
#nav{
width: 900px;
height: 40px;
margin-top: 10px;
}
a{
text-decoration: none;
margin: 3px;
background-color: cadetblue;
}
a:hover{
background-color: #FF1719;
}
a.c_page{
background-color: #FF1719;
}
a.up_page,a.do_page{
width: 80px;
height: 40px;
padding: 5px 10px;
border-radius: 5px;
color: white;
}
a.p_page{
width: 40px;
height: 40px;
padding: 3px;
border-radius: 5px;
color: white;
}
</style>
<script type="text/javascript">
//定义方法，当用户点击某一条数据的修改按钮，触发点击事件
//将该修改按钮对应的账号信息获取过来
function getId(id) {
//alert("获得的id为:"+id)
//将账号发送给服务器，让服务器把账号作为条件查询数据库
//从数据库中将该账号对应的用户的账户信息全部查询出来
//发送给修改页面上进行显示，供用户修改
//将获得的id通过http的get请求将数据以键值对的形式拼接在访问地址的后面以?隔开
location.href="/getAccountById?id="+id;
}
//定义方法，用户点击全选按钮的时候，触发该方法
function c_all(obj) {
//obj:是全选按钮标签的对象
//先判断当前状态是选中还是未选中
//如果当前状态是未选中状态，状态要变为选中
//如果当前状态是选中状态，状态要变为未选中状态
//通过class选择器为cb的条件获得数据行上的所有多选按钮
cbs=document.getElementsByClassName("cb");
for (let i = 0; i <cbs.length ; i++) {
cbs.item(i).checked=obj.checked;
}
}
//定义方法，当反选按钮被点击，数据行中的原本选中的变为未选中，原本未选中的变为选中的
function c_no() {
cbs=document.getElementsByClassName("cb");
for (let i = 0; i <cbs.length ; i++) {
cbs.item(i).checked=!cbs.item(i).checked;
}
}
//定义方法，当用户点击删除按钮，弹出提示对话框，提示用户是否需要删除选中的数据
//如果要删除，检测所有数据行中哪些多选按钮被选中了
//获得这个多选按钮同一个行中的账号id
function btn_del() {
//获得所有数据行中的多选按钮
cbs=document.getElementsByClassName("cb");
tds=document.getElementsByClassName("td_id")
str="";
for (let i = 0; i <cbs.length ; i++) {
//判断每一条数据中哪些多选按钮是选中状态
if (cbs.item(i).checked) {
//获取所有被勾选上的数据的账号id
var id=tds.item(i).innerHTML;
str+=id+","
}
}
//设置确定对话框
result=window.confirm("您是否确定要删除当前选中的账户?");
if (result){
location.href="/deleteById?ids="+str;
}
}
//定义方法，用于处理分页导航栏的样式
function a_style() {
//通过class选择器获得分页导航栏对象
var aElements=document.getElementsByClassName("p_page");
for (var i = 0; i < aElements.length; i++) {
var text=aElements.item(i).innerHTML;
if (text<10){
aElements.item(i).innerHTML=" "+text+" ";
}
}
}
</script>
</head>
<body onload="a_style()">
<div align="center" style="width: 900px;margin: auto">
<h1>账户信息列表</h1>
<p><input type="button" class="btn_del" onclick="btn_del()" value="删除"></p>
<table>
<tr>
<th width="190px"><input type="checkbox" onclick="c_all(this)">全选<input type="checkbox" onclick="c_no()">反选</th>
<th>账号</th>
<th>密码</th>
<th>姓名</th>
<th>身份证号</th>
<th>余额</th>
<th>开户日期</th>
<th>操作</th>
</tr>
{% for account in accounts %}
<tr>
<td width="190px"><input type="checkbox" class="cb"></td>
<td class="td_id">{{ account.id }}</td>
<td>{{ account.password }}</td>
<td>{{ account.name }}</td>
<td>{{ account.personId }}</td>
<td>{{ account.blance }}</td>
<td>{{ account.openDate }}</td>
<td>
<input type="button" class="btn_up" onclick="getId({{ account.id }})" value="修改">
</td>
</tr>
{% endfor %}
</table>
<!-- 显示页码导航栏 -->
<div id="nav" align="center">
<!-- 上一页 -->
<!-- 判断当前页是否有上一页，如果有上一页则显示上一页的按钮，否则就不显示上一页 -->
{% if page.has_previous %}
<a href="/Accounts/?ym={{ page.previous_page_number }}" class="up_page">上一页</a>
{% endif %}
<!-- 页码 -->
{% for ym in yms %}
{% if page.number == ym %}
<a href="/Accounts/?ym={{ ym }}" class="p_page c_page">{{ ym }}</a>
{% else %}
<a href="/Accounts/?ym={{ ym }}" class="p_page">{{ ym }}</a>
{% endif %}
{% endfor %}
<!-- 下一页 -->
{% if page.has_next %}
<a href="/Accounts/?ym={{ page.next_page_number }}" class="do_page">下一页</a>
{% endif %}
</div>
</div>
</body>
</html>最终通过点击查询账户按钮，可查看到以下效果:
该页面的分页效果类似于百度网站的分页效果，这里供读者进行学习和参考，如果读者有更好的效果，可在本代码基础上进行完善。
批量删除以及全选和反选删除功能
在该列表展示页面中，我们也需要完成对于数据的批量删除功能，在前端页面上完成全选和反选供的代码是通过javascript的方式实现的，读者可通过学习html代码中的功能，结合运行的效果进行学习和理解。
当用户勾选在需要删除的账户信息后，点击删除后的同时，我们这里将选中的账户信息的主键id拼接成字符串以逗号隔开的方式作为参数使用get请求发送给服务器
我们在服务器中urls.py文件中定义接收的地址
views.py文件中进行数据解析和分解，完成删除
# 创建方法，接收页面上用户想要删除的数据对应的账号
def deletes(request):
# 1,3,5,7,9,
ids=request.GET["ids"]
# 将字符串按逗号进行分割
list1=str(ids).split(",")
for id in list1:
# 判断每一次循环的数据是否是数字
if id.isdigit():
# 将该id作为条件删除数据库的数据
ac=Account.objects.get(id=id)
ac.delete()
return redirect(getAccountList)从数据库中删除完成后，我们需要立即刷新列表，进行数据库和浏览器页面的同步显示
