自定义分页组件

背景:django自带的分页组件不能很好的支持页码操作

实现:结合bootstrap自定义分页组件

组件:

# 自定义分页组件
class SplitPage:
    '''
    @:cur_page:当前页码
    @:rouNum:数据总行数
    @:perPage:每页显示的行数
    @:displayPageNum:要显示的页码数
    '''
    def __init__(self,cur_page,rowNum,perPage,displayPageNum):
        try:
            self.cur_page = int(cur_page)
        except(ValueError) as e:
            self.cur_page = 1
        self.rowNum = rowNum
        self.perPage = perPage
        self.displayPageNum = displayPageNum
        self.pages = self.pageCount()

    # 计算总共的页码数
    def pageCount(self):
        a,b = divmod(self.rowNum,self.perPage)
        if b:
            return a + 1
        else:return a

    def contentRange(self):
        header = (self.cur_page - 1) * self.perPage
        trail = self.cur_page * self.perPage
        return (header,trail)

    def pageRange(self):
        half = int((self.displayPageNum - 1) / 2)
        pageBegin = self.cur_page - half
        pageEnd = self.cur_page + half + 1
        if pageBegin <= 0:
            pageBegin = 1
            pageEnd = self.displayPageNum + 1
        if pageEnd >= self.pages:
            pageBegin = self.pages - self.displayPageNum
            pageEnd = self.pages + 1
        print(pageBegin,pageEnd)
        return pageBegin,pageEnd

    def webPage(self):
        pageTag = []
        # 获取要显示的页码范围
        a,b = self.pageRange()
        # 生成页码标签
        for i in range(a,b):
            tag = "<li><a href='/privpage.html?page={}'>{}</a></li>".format(i,i)
            pageTag.append(tag)

        prevPage = self.cur_page - 1
        nextPage = self.cur_page + 1
        if prevPage < 1:
            prevPageTag = "<li><a href='/privpage.html?page={}'>{}</a></li>".format(self.cur_page,"上一页")
        else:prevPageTag = "<li><a href='/privpage.html?page={}'>{}</a></li>".format(prevPage,"上一页")
        if nextPage > self.pages:
            nextPageTag = "<li><a href='/privpage.html?page={}'>{}</a></li>".format(self.cur_page,"下一页")
        else:nextPageTag = "<li><a href='/privpage.html?page={}'>{}</a></li>".format(nextPage,"下一页")

        pageTag.insert(0,prevPageTag)
        pageTag.append(nextPageTag)
        return ''.join(pageTag)

应用组件函数:

def privpage(request):
    # for i in range(300):
    #     models.Classes.objects.create(class_name="class"+str(i))
    # 当前要访问的页码
    cur_page = request.GET.get("page")
    # 获取数据库行数
    allRownum = models.Classes.objects.all().count()
    '''
    设置每页显示10条数据
    第一页的数据:0~10
    第二页的数据:10~20
    ...
    '''
    curPageObj = SplitPage(cur_page,allRownum,10,7)
    # 获取当前页的开始和结束
    start = curPageObj.contentRange()[0]
    end = curPageObj.contentRange()[1]
    # 获取当前页需要显示的数据
    class_list = models.Classes.objects.all()[start:end]
    return render(request,'index.html',{"class_list":class_list,"pageObj":curPageObj})

页面支持组件:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>ORM单表操作</title>
    <link rel="stylesheet" href="/static/bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<h1>ORM单表操作</h1>
<table border="1">
    <thead>
    <tr>
        <th>#ID</th>
        <th>班级名称</th>
    </tr>
    </thead>
    <tbody>
    {% for row in class_list %}
        <tr>
            <td>{{ row.cid }}</td>
            <td>{{ row.class_name }}</td>
        </tr>
    {% endfor %}
    </tbody>
</table>
<div>
    <nav aria-label="Page navigation">
  <ul class="pagination">
    {#    让返回的字符串标签生效加“|safe”#}
    {{ pageObj.webPage|safe }}
  </ul>
</nav>
</div>
<a href="/add_class.html">添加班级</a>
</body>
</html>

效果展示:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值