枫枫知道个人博客|【项目相关】0207--分页器

[[ slide_text ]]

[[ item.content ]]

【项目相关】0207--分页器

发布时间：2022-02-09 作者：枫枫来源：枫枫知道个人博客

python Django 分页器

## 课前准备知识

获取所有的get请求参数

```Python
query_params = request.GET.copy()
# 字典的格式  <QueryDict: {'id': ['1'], 'aa': ['12']}>
print(query_params)
# 转换成url格式  id=1&aa=12
print(query_params.urlencode())
```

以后要做保留原搜索条件的

```Python
from urllib.parse import urlencode
import math

class Pagination:
    def __init__(self, current_page, all_count, base_url, query_params, per_page=20, pager_page_count=11):
        """
        current_page 当前页码
        all_count 数据库中的总条数
        base_url 原始 URL
        query_params 保留原搜索条件
        per_page 一页展示多少条
        pager_page_count 最多显示多少个页码
        """

# 最多可以分多少页
        self.pager_count = math.ceil(all_count / per_page)

# 当前页码可能是不符合要求的  数字区间
        try:
            self.current_page = int(current_page)
            if not 0 < self.current_page <= self.pager_count:
                self.current_page = 1
        except Exception:
            # 不符合条件的  就让它的页码变为 1
            self.current_page = 1

self.base_url = base_url
        self.query_params = query_params
        self.per_page = per_page

# 如果分页的数小于要显示的页码数
        self.pager_page_count = pager_page_count
        self.half_pager_page_count = int(self.pager_page_count / 2)
        if self.pager_count < self.pager_page_count:
            self.pager_page_count = self.pager_count

# 每边的个数

@property
    def start(self):
        return (self.current_page - 1) * self.per_page

@property
    def end(self):
        return self.current_page * self.per_page

# 生成 html页码
    def page_html(self):
        """
        计算页码的起始和结束 最多显示 11个 我当前的页码要在最中间
        1     1 2 3 4 5 6 7 8 9 10 11
        11    6 7 8 9 10 11 12 13 14 15 16
        :return:
        """
        # 需要分类讨论

# 正常情况
        start = self.current_page - self.half_pager_page_count + 1
        end = self.current_page + self.half_pager_page_count
        # 如果当前页码小于单边展示页码或者加上单边展示页码超出全部页码 那么就是特殊情况
        if self.current_page <= self.half_pager_page_count or self.current_page + self.half_pager_page_count >= self.pager_count:
            # 左边的特殊情况
            start = 1
            end = self.pager_page_count
            if self.current_page + self.half_pager_page_count >= self.pager_count:
                # 右边的特殊情况
                start = self.pager_count - self.pager_page_count + 1
                end = self.pager_count

# 遍历
        page_list = []

# 上一页
        if self.current_page == 1:
            # 如果是在第一页
            prev = f'<li><a href="javascript: 0;">上一页</a></li>'
        else:
            self.query_params['page'] = self.current_page - 1
            prev = f'<li><a href="{self.base_url}?{self.query_encode}">上一页</a></li>'
        page_list.append(prev)

for i in range(start, end + 1):
            self.query_params['page'] = i
            # 生成标签
            # 如果是当前标签
            if self.current_page == i:
                li = f'<li class="active"><a href="{self.base_url}?{self.query_encode}">{i}</a></li>'
            else:
                li = f'<li><a href="{self.base_url}?{self.query_encode}">{i}</a></li>'
            page_list.append(li)

# 下一页
        if self.current_page == self.pager_count:
            # 如果是在第一页
            next = f'<li><a href="javascript: 0;">下一页</a></li>'
        else:
            self.query_params['page'] = self.current_page + 1
            next = f'<li><a href="{self.base_url}?{self.query_encode}">下一页</a></li>'
        page_list.append(next)
        return ''.join(page_list)

@property
    def query_encode(self):
        return urlencode(self.query_params)

if __name__ == '__main__':
    pager = Pagination(
        current_page=1,
        all_count=4,
        base_url='/article',
        query_params={"tag": 'python'},
        per_page=1,
    )
    pager_str = pager.page_html()
    print(pager_str, pager.start, pager.end)

```

后端逻辑

```Python
class Pagination:
    def __init__(self, current_page, all_count, base_url, query_params, per_page=20, pager_page_count=11,
                 position=''):
        """
        分页初始化
        :param current_page: 当前页码
        :param all_count: 数据库中总条数
        :param base_url: 基础URL
        :param query_params: QueryDict对象，内部含所有当前URL的原条件
        :param pager_page_count: 页面上最多显示的页码数量
        :param position: 页面上的定位点
        """
        self.base_url = base_url
        self.query_params = query_params
        self.per_page = per_page
        self.all_count = all_count
        self.pager_page_count = pager_page_count
        pager_count, b = divmod(all_count, per_page)  # 返回除数和余数
        if b != 0:
            pager_count += 1
        self.pager_count = pager_count

half_pager_page_count = int(pager_page_count / 2)
        self.half_pager_page_count = half_pager_page_count

self.position = position

# 格式错误的页码或不在范围内的页面，设置为默认值1
        try:
            self.current_page = int(current_page)
            if not (0 < self.current_page <= self.pager_count):
                raise Exception()
        except Exception as e:
            self.current_page = 1

@property
    def start(self):
        """
        数据获取值起始索引
        :return:
        """
        return (self.current_page - 1) * self.per_page

@property
    def end(self):
        """
        数据获取值结束索引
        :return:
        """
        return self.current_page * self.per_page

def page_html(self):
        """
        生成HTML页码
        :return:
        """
        # 如果数据总页码pager_count<11 pager_page_count
        if self.pager_count < self.pager_page_count:
            pager_start = 1
            pager_end = self.pager_count
        else:
            # 数据页码已经超过11
            # 判断： 如果当前页 <= 5 half_pager_page_count
            if self.current_page <= self.half_pager_page_count:
                pager_start = 1
                pager_end = self.pager_page_count
            else:
                # 如果： 当前页+5 > 总页码
                if (self.current_page + self.half_pager_page_count) > self.pager_count:
                    pager_end = self.pager_count
                    pager_start = self.pager_count - self.pager_page_count + 1
                else:
                    pager_start = self.current_page - self.half_pager_page_count
                    pager_end = self.current_page + self.half_pager_page_count

page_list = []

if self.current_page <= 1:
            prev = '<li><a href="javascript: 0;">上一页</a></li>'
        else:
            self.query_params['page'] = self.current_page - 1
            prev = '<li><a href="%s?%s#%s">上一页</a></li>' % (self.base_url, self.query_params.urlencode(), self.position)
        page_list.append(prev)

for i in range(pager_start, pager_end + 1):
            self.query_params['page'] = i
            if self.current_page == i:
                tpl = '<li class="active"><a href="%s?%s#%s">%s</a></li>' % (
                    self.base_url, self.query_params.urlencode(), self.position, i,)
            else:
                tpl = '<li><a href="%s?%s#%s">%s</a></li>' % (
                    self.base_url, self.query_params.urlencode(), self.position, i,)
            page_list.append(tpl)

if self.current_page >= self.pager_count:
            nex = '<li><a href="javascript: 0;">下一页</a></li>'
        else:
            self.query_params['page'] = self.current_page + 1
            nex = '<li><a href="%s?%s#%s">下一页</a></li>' % (self.base_url, self.query_params.urlencode(), self.position)
        page_list.append(nex)

page_str = "".join(page_list)
        return page_str

```

使用

```Python
def index(request):
    all_article = Articles.objects.filter(status=1).order_by('-change_date')

from app01.utils.pagination import Pagination
    query_params = request.GET.copy()
    query_params._mutable = True

pager = Pagination(
        current_page=request.GET.get('page'),  # 当前的页码
        all_count=all_article.count(),  # 数据的总条数
        base_url=request.path_info,  # 原路径
        per_page=2,  # 一页显示的条数
        query_params=query_params,  # 保留原搜索条件
        position='con'  # 定位点

)
    article_list = all_article[pager.start:pager.end]

return render(request, 'index.html', locals())
```

前端部分

```HTML
<ul class="pager">
    {{ pager.page_html|safe }}
</ul>
```

css

```CSS
 .pager {
    width: 100%;
    list-style: none;
    display: flex;
    justify-content: center;
  
    > li {
      display: inline-flex;
      min-width: 30px;
      height: 30px;
      background-color: white;
      border-radius: 4px;
      justify-content: center;
      align-items: center;
      margin-right: 10px;
      padding: 0 10px;
      transition: all 0.3s;
  
      a[href="javascript: 0;"] {
        cursor: not-allowed;
      }
  
      &:last-child {
        margin-right: 0;
      }
  
      &:hover {
        background-color: #f0eeee;
      }
    }
  
    > li.active {
      background-color: #ff9800;
  
      a {
        color: white;
      }
    }
}
```

上一篇：python基础--什么是数据类型下一篇：python基础--异常处理

你觉得文章怎么样

挽风甜

ggu

10个月前
点赞（0）回复（0）

枫枫知道个人博客

【项目相关】0207--分页器

挽风甜