Django自定义分页功能的实现

前言：本文介绍在Django中如何通过前后端代码实现页面自定义分页功能，详细介绍实现原理，并附实现代码。

实现的功能：

1、根据页数，显示分页标签，并限制显示的分页标签最多10个

2、当前页标签颜色高亮，当页数标签多于10个时位于分页标签的中间处

3、实现上一页、下一页、首页、尾页标签功能

4、具有跳转到指定页面功能，按enter或者点击按钮跳转

5、每页显示的行数可定制，行数修改后页数也跟着变更，每页显示行数使用cookie来保存

实现的原理：

1、分页标签先在后台组装好（这里使用a标签），可以页数几个就组装几个分页标签，然后由Django插入到前端的HTML代码中统一发给请求端。

2、当前页标签高亮功能：首先需要知道用户当前页是哪，这从客户端发送过来的请求数据里取得，然后在组装当前页标签内容时，加上特殊的CSS样式，返回给用户，这样在前端看到的当前页标签样式就和其他不同。

3、当前页标签居中：我们这边限制最多只显示10个标签，后台组装页码标签，一般从（当前页码-4）到（当前页码+5）。特殊情况该功能不起作用，例如1、总页数小于等于10页；2、当前页小于5；3、当前页大于总页数-5。

4、每页显示的行数定制功能：首次请求，默认10行，保存在cookie中。点击修改行数自动触发事件，修改客户端中保存行数信息的cookie值，并刷新页面。服务端在收到客户端发送过来信息中，从cookie中取得行数定制信息，按该行数组装分页标签，再返回给前端。

用到的知识点：

后端

1、request.COOKIES.get(key)：取得cookie值，设置cookie：HttpResponse/redirect/render().set_cookie.(k,v,...)

2、render(request, 'URL', {k,v})：返回给前端，可以带参数

3、locals():返回当前所有的本地变量字典，存在部分是django模板用不到变量

3、mark_safe：转义，将HTML代码给转换成HTML实体，否则Django插入前端显示的是“HTML代码”

前端

1、获取cookie：$.cookie(k)，设置cookie：$.cookie(k,v,{'path':value})

2、刷新页面location.reload()，跳转到指定页面location.href=url

3、$('XX').bind('keypress', function (event){}):绑定事件band，键盘输入事件keypress，键盘输入值event.keyCode，13为enter

4、$('XX').change(function (){}):change有变动自动触发事件，这边用在修改页面显示行数

5、{{ xxx|safe }}：|，过滤器，safe，将HTML代码给转换成HTML实体，防止XXS攻击，功能后后端的mark_safe相同

后端代码：

def query(request):

"""

current_page:当前页码，默认第一页

line_num:每页显示的行数，默认10行

table_line_count:总行数

page_count：总页数

display_page_num_count:显示的页数码标签总个数，默认10个

"""

    current_page = int(request.GET.get('p',1))

    line_num = int(request.COOKIES.get("per_page_line_num",10))

    table_line_count=tablename.objects.count()            ####统计表总行数,tablename指数据库中的表，根据实际修改

display_page_num_count=10

    ####求总页数

    a,b=divmod(table_line_count,line_num)      ####求除数和余数，例如divmod(5,1)=(1,1)

    if b>0:

        page_count=a+1

    else:

        page_count = a

"""

first_page:首页

    last_page:尾页

    prev_page:上一页

    next_page:下一页

first_display_page_num:第一个显示的页码

last_display_page_num:最后一个显示的页码

"""

    first_page = "%s" % (1, "首页")

    last_page = "%s" % (page_count, "尾页")

    if current_page-1==0:

        prev_page="%s" % (current_page, "上一页")

    else:

        prev_page="%s" % (current_page-1, "上一页")

    if current_page==page_count:

        next_page="%s" % (current_page, "下一页")

    else:

        next_page="%s" % (current_page+1, "下一页")

    page_str=""

    page_str+=first_page

    page_str+=prev_page

    if page_count<=display_page_num_count:

        first_display_page_num = 1

        last_display_page_num = page_count + 1

    else:

        # 总页数大于10页（只显示10个页数标签）

        #    如果当前页数《=5

        #        显示1-10页数标签

        #    如果当前页数x》5

        #        显示 x-4到x+5页数标签

        #    如果当前页数x》总页数-5

        #        显示 总页数-9 到总页数之间的标签

        if current_page_num<=5:

            first_display_page_num=1

            last_display_page_num=display_page_num_count

        elif 5

            first_display_page_num=current_page_num-5+1

            last_display_page_num=current_page_num+5

        else:

            first_display_page_num=page_count-5-5+1

            last_display_page_num=page_count

    for i in range(first_display_page_num, last_display_page_num):

        if i == current_page:

            page_str += "%s" % (i, i)

        else:

            page_str += "%s" % (i, i)

    page_str += next_page

    page_str += last_page

    page_str = mark_safe(page_str)

    response = render(request, 'query.html', locals())

    response.set_cookie("per_page_line_num",line_num,path='/query/')  ####设置每页显示的行数

    return response

前端代码（query.html）

   

   

   

共{{page_count}}页，{{table_line_count}}行，每页显示

   

       

10

       

30

       

50

       

100

   

    条记录，

前往

    页

   

    {{ page_str|safe }}

   

是全页面刷新，且每页显示数量放在cookie里传给服务端，然后服务端再根据这信息编排页码标签返回给客户端。