django前端分页小组件
# -*- coding:utf-8 -*- from django.utils.safestring import mark_safe class Page(object): def __init__(self,curpage,all_count,page_tag=10,tagnum=7): self.curpage = int(curpage) self.all_count = int(all_count) self.page_tag = int(page_tag) self.tagnum = int(tagnum) @property def start(self): return (self.curpage - 1) * self.page_tag @property def end(self): return self.curpage * self.page_tag def page_str(self,url): count, y = divmod(self.all_count, self.page_tag) if y: count += 1 page_list = [] if count < self.tagnum: start_index = 1 end_index = count + 1 else: if self.curpage < (self.tagnum / 2) + 1: start_index = 1 end_index = self.tagnum + 1 else: start_index = self.curpage - ((self.tagnum - 1) / 2) end_index = self.curpage + ((self.tagnum - 1) / 2) + 1 if (self.curpage + ((self.tagnum - 1) / 2) + 1) > count: start_index = count - self.tagnum + 1 end_index = count + 1 if self.curpage == 1: pre_str = '''<li><a aria-label = "Previous" href="javascript:void(0)"> <span aria-hidden = "true"> 上一页 </span></a></li>''' else: pre_str = '''<li><a aria-label = "Previous" href="%s?p=%s&page_on_num=%s"> <span aria-hidden = "true"> 上一页 </span></a></li>''' % (url, self.curpage - 1, self.page_tag) page_list.append(pre_str) for i in range(int(start_index), int(end_index)): if i == self.curpage: pre_str = '<li class ="active"> <a href="%s?p=%s&page_on_num=%s"> %s </a> </li>' % (url, i, self.page_tag, i) else: pre_str = '<li> <a href="%s?p=%s&page_on_num=%s"> %s </a> </li>' % (url, i, self.page_tag, i) page_list.append(pre_str) if len(page_list) == 1: pre_str = '<li class ="active"> <a href="javascript:void(0)"> 1 </a> </li>' page_list.append(pre_str) if self.curpage == count: pre_str = '''<li><a aria-label = "Next" href="javascript:void(0)"> <span aria-hidden = "true"> 下一页 </span></a></li>''' else: pre_str = '''<li><a aria-label = "Next" href="%s?p=%s&page_on_num=%s"> <span aria-hidden = "true"> 下一页 </span></a></li>'''% (url, self.curpage + 1, self.page_tag) page_list.append(pre_str) pake_str = ''.join(page_list) return mark_safe(pake_str)
前端写法:
<nav aria-label="Page navigation" class="text-center"> <ul class="pagination"> {{ pake_str}} </ul> </nav> 设置每页个数: <div> <select id ="page_on_num" name="page_on_num" > {% for row in page_tag_list %} {% if row == page_tag %} <option value="{{ row }}" selected="selected">每页{{ row }}个</option> {% else %} <option value="{{ row }}">每页{{ row }}个</option> {% endif %} {% endfor %} </select> </div> <div><input id="pagenumtest" type="text"> <input type="button" value="跳转" id="pagenum" tagnum="{{ page_tag }}"> <script type="text/javascript" src="/static/plugins/jquery/jquery.min.js"></script> <script> $('#page_on_num').change(function () { var row = $(this).val(); var urlstr = '/backend/pagelist?p=1&page_on_num='+row; location.href=urlstr }); $("#pagenum").click(function () { var row = $("#pagenumtest").val(); var tag = $("#pagenum").attr('tagnum'); console.log(tag) var urlstr = '/backend/pagelist?p='+row+'&page_on_num='+tag; location.href=urlstr }) </script>