最近花了很长时间在分页需求上,先是用django的分页插件,随后又用jquery来处理分页。
需求:在一个index界面中,有两个table,分别用两个按钮来控制,我们要对着两个table来进行分页处理。
开始的做法:
后台:设置limit分页参数——>获取数据——>根据分页参数拆分数据——>数据传至前台
# 分页,每页显示5个 limit = 5 paginator = Paginator(bugs_message, limit) page_b = request.GET.get('page') try: bugs_message = paginator.page(page_b) except PageNotAnInteger: # 如果页码不是整数,则显示第一页 bugs_message = paginator.page(1) except EmptyPage: # 页码超出范围,则显示最后一页 bugs_message = paginator.page(paginator.num_pages)
前台:django自带的分页插件,获取上下页,并发送链接,**注:**链接中的page参数(是返回后台那个page)
{% if bugs_message.has_previous %}
«首页
上一页
{% endif %}
第 {{ bugs_message.number }} 页
{% if bugs_message.has_next %}
下一页
尾页
{% endif %}
**详细说明:**此分页是用django中Paginatormo模块来做,走的流程:
前台点击分页按钮——>发送href链接——>后台获取page参数——>调取数据——>返回前台。
**此处遇到的问题:**因为是双table,所以在分页会有两个问题:
一:不管你点击的是哪个table的上下页,两个table同时会进行页面变化。
二:上下页变换后都会首先跳到第一个table界面去,而不是在当前table界面进行页面变化。
解决:
问题一:前台:
1、将分页分为两份,分别放入两个table中(原先做法:直接放在两个table外面)
2、在href链接上增加参数,href="?*b-*page=1
,根据不同的分页请求设置不同的href参数,那传到后台参数不同,就可以别进行处理。
后台:
获取到前台传的分页参数,进行不同的处理:
paginator = Paginator(bugs_message, limit)
page_b = request.GET.get('b-page')
try:
bugs_message = paginator.page(page_b)
except PageNotAnInteger: # 如果页码不是整数,则显示第一页
bugs_message = paginator.page(1)
except EmptyPage: # 页码超出范围,则显示最后一页
bugs_message = paginator.page(paginator.num_pages)
# demand分页
paginator_d = Paginator(demand_message, limit)
page_d = request.GET.get('d-page')
try:
demand_message = paginator_d.page(page_d)
except PageNotAnInteger: # 如果页码不是整数,则显示第一页
demand_message = paginator_d.page(1)
except EmptyPage: # 页码超出范围,则显示最后一页
demand_message = paginator_d.page(paginator_d.num_pages)
问题二:只在前台进行了处理,思路:获取发送的url——>对url中的参数进行判定——>将对应的table隐身。
var params = window.location.href;
// alert('params:',r);
console.log('url:', params);
if (params.includes('b-')) {
console.log('b-');
document.getElementById('t2').style.display='none';
}
else if (params.includes('d-')) {
console.log('d-');
document.getElementById('t1').style.display='none';
document.getElementById('t2').style.display='block';
}
这样就解决了自己所有的问题。
**总结:**在做此分页是,自己对于django中分页的插件,流程等没有了解清楚,导致一度想要放弃使用这个方法而直接使用jquery的分页去处理。以后再使用一个新东西时,要先了解下这个方法。
这里还想记录下自己使用jquery,做的分页的代码:
首页
上一页
第页
下一页
尾页
*思路:*获取table下的tr——>进行分页——>绑定上下页等。