本文继自定义分页完整版之后的又一个改进版本,带上了保留字段,
上一篇地址:https://www.cnblogs.com/apollo1616/articles/9925787.html
本文只粘贴pager文件替换原文的pager文件,html替换原文的test.html文件
views.py文件内容
#!/usr/bin/env python # -*- coding:utf-8 -*- import copy class Pagination(object): # 封装分页相关数据 def __init__(self, request, current_page, record_count, page_record_limit, page_count_limit): """ :param page_count: 总页数 :param record_count: 数据总个数 :param page_range: 页的范围 :param page_count_limit: 最多显示页面 :param page_record_limit: 每页显示的行数 :param page_record_list: 页面数据列表 :param current_page: 当前页 :param page_mid: 页面显示页码中间位置页码 """ self.params = copy.deepcopy(request.GET) # 当前页码 try: current_page = int(current_page) if current_page <= 1: current_page = 1 except Exception as e: current_page = 1 self.current_page = current_page # 数据总个数 self.record_count = record_count # 每页显示的行数 self.page_record_limit = page_record_limit # 总页数(数据总个数record_count / 每页显示的行数page_record_limit) # [数据总个数]对[每页显示的行数]取余,如果余数为0,总页数等于商,否则等于商+1 page_count, tmp = divmod(record_count, page_record_limit) if tmp: page_count += 1
self.page_count = page_count else: self.page_count = page_count # 页面页数显示限制(要奇数,便于对称显示) self.page_count_limit = page_count_limit # 每页第一条数据 @property def start(self): return (self.current_page - 1) * self.page_record_limit # 每页最后一条数据 @property def end(self): return self.current_page * self.page_record_limit def page_range(self): # 如果,总页码[小于]最多显示页面： if self.page_count <= self.page_count_limit: page_start = 1 page_end = self.page_count + 1 # 如果,总页码[大于]最多显示页面： else: # 页面显示页码中间位置页码 self.page_mid = int(self.page_count_limit - 1) // 2 if self.current_page <= self.page_mid: page_start = 1 page_end = self.page_count_limit + 1 else: if (self.current_page + self.page_mid) > self.page_count: page_start = self.page_count - self.page_count_limit + 1 page_end = self.page_count + 1 else: page_start = self.current_page - self.page_mid page_end = self.current_page + self.page_mid + 1 return range(page_start, page_end) # 页面显示页码的控制 def page_html(self): # 准备页面渲染的数据 page_record_list = [] # 首页 first_page = '<li><a href="?page=%s">首页</a></li>' % (1,) page_record_list.append(first_page) # 处理上一页 if self.current_page <= 1: prev_page = '<li class="disabled"><a href="#">上一页</a></li>' else: prev_page = '<li><a href="?page=%s">上一页</a></li>' % (self.current_page - 1,) page_record_list.append(prev_page) ################ 点击页码保留搜索条件 ################ # 页码显示部分 for i in self.page_range(): self.params["page"] = i if i == self.current_page: temp = '<li class="active"><a href="?%s">%s</a></li>' % (self.params.urlencode(), i) else: temp = '<li><a href="?%s">%s</a></li>' % (self.params.urlencode(), i,) page_record_list.append(temp) ################ 点击页码保留搜索条件 ################ # 处理下一页 if self.current_page >= self.page_count: next_page = '<li class="disabled"><a href="#">下一页</a></li>' else: next_page = '<li><a href="?page=%s">下一页</a></li>' % (self.current_page + 1,) page_record_list.append(next_page) # 尾页 last_page = '<li><a href="?page=%s">尾页</a></li>' % (self.page_count,) page_record_list.append(last_page) return ''.join(page_record_list)
test.html文件内容
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Apollo</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="/static/js/jquery-3.3.1.js"></script> <script> $(function () { $('.btn-success').click(function () { $.ajax({ url: '', type: 'get', success: function (data) { console.log(data); } }) }) }) </script> </head> <body> <div class="container"> <div class="page-header"> <h1>自定义分页器 <small> 阿波罗图书管理系统</small> </h1> </div> <div class="row"> <div class="col-md-6 col-md-offset-3"> <form action="" method="get"> <div class="form-group col-md-10" style="padding: 0"> <label class="sr-only" for="search">请输入关键词搜索</label> <div class="input-group"> <div class="input-group-addon"><span class="glyphicon glyphicon-search"></span></div> <input type="text" class="form-control" id="search" name=" " placeholder="请输入关键词搜索"> </div> </div> <div style="padding-left: 5px" class="col-md-2"> <button type="submit" class="btn btn-primary " >百度一下</button> </div> </form> </div> </div> <div class="row"> <div class="col-md-6 col-md-offset-3"> <table class="table table-bordered table-hover table-striped"> <thead> <tr> <td>姓名</td> <td>年龄</td> </tr> </thead> {% for row in data %} <tr> <td>{{ row.name }}</td> <td>{{ row.age }}</td> </tr> {% endfor %} </table> </div> {# 分页样式 #} <div class="col-md-6 col-md-offset-3"> <ul class="pagination pagination-sm"> {{ page_obj.page_html|safe }} </ul> </div> </div> </div> </body> </html>
self.page_count = page_count
