分页器制作

        分页操作是我们在前端展示大量数据的必须操作。下面介绍了一种简单分页器实现的基本原理和步骤，数据来源于数据库。

        工具： python中的django框架，MySQL数据库。

        首先，在进行分页制作之前，需要明确以下几个问题：

        ①想访问哪一页

        需要访问哪一页可以通过前端，通过直接在url后面携带数据的‘GET’请求方式向后端传递数据，例如：url/?page=1，此时获取的展示页码为字符串类型，需要我们手动转为整型才可以完成后续的加减操作。后端获取数据方式为：

current_page=request.GET.get('page', 1)
int_cur_page_num = int(current_page_num)

当前端有页码数据传入时则自动获取当前页码，当没有页码传入时，自动在页面显示第一页

        ②每页需要展示多少条内容

        每页显示的内容由我们自己定义，如：

per_page_num = 10

        ③内容展示的起始位置和终止位置

        起始位置和终止位置的确定，根据每页展示内容的数量和当前展示的页码可以计算得到，起始页码和终止页码计算如下：

# 起始页码    
start_page = (int_cur_page_num-1) * per_page_num

# 终止页码
end_page = int_cur_page_num*per_page_num

# 传递给前端需要展示的内容
book_list = models.Book.objects.all()[start_page:end_page]

        通过解决以上三个问题，基本实现了数据分页显示的操作，但是，此时需要我们手动传入需要展示的哪一页的数值（图中标红的位置），这无疑会给使用者带来很大的麻烦。

          为了解决以上以上问题，需要在下端展示出可以点击的展示页码，通过点击即可实现展示页的跳转。在引用了bootstrap中的分页组件，通过该组件可以简单有效的解决展示页码向后端传递的问题，对其中的 li 标签进行简单修改即可，修改结果的如下。通过在后端操作修改数字1，2，3....即可。

<li><a href="?page=1">1</a></li>

         需要修改展示页，首先需要对展示对象进行处理，一是统计需要展示内容的所有数量，二是确定展示页面的数量。

        统计需要展示内容的数量利用采用count方法，确定展示页面的数量利用divmode方法（自己确定每页展示内容为10页），代码如下。

# 确定展示内容数量
book_query = models.Book.objects.all()  # 获取需要展示的内容
book_num = book_query.count()     # 表示需要展示内容的数量

# 确定展示页面数量
per_page_num = 10
page_num,more = divmod(book_num, per_page_num)  # 页面数量用page_num表示，more表示余数
if more:                                        # 通过余数来更近一步确认页面数量
    page_num += 1

        至此，由于页面数量无法传到前端进行操作，所以将标签页写在后端，然后返回给前端，前端再进行显示。

page_html = ''
# 确保下端展示页链接数不出现负数，展示页码开始为第一页
limit_num = 6
if int_cur_page_num < 6:
    now_num = limit_num
else:
    now_num = int_cur_page_num
# 确定下端展示页码链接的数量，为当前展示页码的前5个和后5个，总共11个
for i in range(now_num - 5,now_num + 6):  
      # 将显示页进行高亮显示
    if int_cur_page_num == i:
        # 向前端传递的展示页链接html标签全部存储与page_html中，并对当前显示页进行高亮显示
        page_html = page_html+'<li class="active"><a href="?page=%s">%s</a></li>'%(i,i)
     else:
         page_html = page_html + '<li><a href="?page=%s">%s</a></li>' % (i, i)

        通过以上步骤已经基本完成了分页器的基本操作。通过都以上代码进行组合即可基本实现前端分页器的显示。

后端代码整体代码如下：

def ab_bo(request):
    book_query = models.Book.objects.all()
    book_num = book_query.count()
    current_page_num = request.GET.get('page',1) # 获取访问的展示页，如果没有则显示第一页
    int_cur_page_num = int(current_page_num)
    per_page_num = 10
    page_num,more = divmod(book_num, per_page_num)

    if more:
        page_num += 1
    page_html = ''
    limit_num = 6
    if int_cur_page_num < 6:
        now_num = limit_num
    else:
        now_num = int_cur_page_num
    for i in range(now_num - 5,now_num + 6):
        if int_cur_page_num == i:
            page_html = page_html+'<li class="active"><a href="?page=%s">%s</a></li>'%(i,i) # 将显示页进行高亮显示
        else:
            page_html = page_html + '<li><a href="?page=%s">%s</a></li>' % (i, i)
    start_page = (int_cur_page_num-1) * per_page_num
    end_page = int_cur_page_num*per_page_num
    book_list = models.Book.objects.all()[start_page:end_page]
    return render(request, 'ab_bo.html', locals())

 前端页码展示如下：

<div class="container-fluid">
    <div class="row">
        <div class="col-md-offset-2">
            {% for foo in book_list %}
            <p>{{ foo.title }}</p>
            {% endfor %}
        </div>
    </div>
</div>
<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    {{ page_html|safe }}
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

 最终效果如下：

         以上代码表示了一个简单分页器的实现过程，更过的功能还可以在此基础上进行修改和添加，恳请大家不吝赐教呀~~~~~