關於分頁功能的實現（Python）

實現客戶端分頁顯示數據，客戶端可選擇每頁顯示幾條數據（利用cookie），可實現上一頁，下一頁以及跳轉到第幾頁。

服務器端：

views.py:

current_page = request.GET.get('p',1)#獲取頁碼
current_page = int(current_page)
page_per_num = request.COOKIES.get('per_size',10)#獲取每頁顯示的頁碼數量
page_per_num = int(page_per_num)

tatol_data = models.Classes.objects.all().count()#計算總頁數
v,a = divmod(tatol_data,page_per_num)
if a:
    v+=1

if v<page_per_num+1:# 計算當前頁顯示的頁碼的起始，總頁數小於每頁要顯示的數據個數
    start = 1
    end = v+1
else:
    if current_page<int((page_per_num+1)/2)://限制頁碼的首端
        start = 1
        end = page_per_num+1+1
    else:
        if current_page+int(page_per_num/2)+1>v://限制頁碼的尾端
            start = v-page_per_num
            end = v+1
        else:　　　　　　　　　　　　//正常情況
            start = current_page-int(page_per_num/2)
            end = current_page+int(page_per_num/2)+1

str =  ''#生產頁碼標簽
if current_page==1://設置上一頁
    str += '<a class="a1" href="javascript:void(0)">上一頁</a>'
else:
    str+='<a class="a1" href="/app/Class/?p=%s">上一頁</a>'%(current_page-1)
for i in range(start,end):
    if i == current_page:
         str=str+'<a class="a1 active" href="/app/Class/?p=%s">%s</a>'%(i,i)
    else:
        str = str+'<a class="a1" href="/app/Class/?p=%s">%s</a>'%(i,i)
if current_page==v://設置下一頁
    str += '<a class="a1" href="#">下一頁</a>'
else:
    str += '<a class="a1" href="/app/Class/?p=%s">下一頁</a>' % (current_page + 1)
//設置跳轉頁碼
jumps = ''' <input type='text'/><a onclick='jump(this,"/app/Class/?p=");'>Go</a>
             <script>
                 function jump(ths,base){
                      var v=ths.previousSibling.value;
                      if(v<=%s&&v>=1)
                         location.href = base+v;
                    }
                </script>
            ''' % v
str+=jumps
page_current_start = (current_page-1)*page_per_num#計算當前頁顯示的數據起始
page_current_end = (current_page)*page_per_num
class_list = models.Classes.objects.all()[page_current_start:page_current_end]

return render(request, 'class.html', {'username': username,'class_list':class_list,'str':str})

客戶端:

<p>頁碼：</p>
{{ str|safe }}//設置按代碼顯示
 <div>
     <select id="p" onchange="changePageSize(this);">//選擇每頁顯示的數據數量
         <option value="10">10</option>
         <option value="20">20</option>
         <option value="30">30</option>
         <option value="50">50</option>
         <option value="100">100</option>
     </select>
 </div>

<script src="/static/jquery-1.12.4.js"></script>
<script src="/static/jquery.cookie.js"></script>//使用jQuery.cookie操作cookie
    <script>
        $(function () {//頁面加載完成自動選中select框的value值
            v = $.cookie('per_size');
            $('#p').val(v);
        });
        function changePageSize(ths) {//客戶端選擇后，設置cookie並刷新頁面
            value = $(ths).val();
            $.cookie('per_size',value);
            location.reload();
        }
    </script>
效果圖：