Django python 基於Layui的分頁

前端程式碼

table = layui.table;
        table.render({
            elem: '#test-table-autowidth'
            , url: '/api_v1_get_data_keys'
            ,height: 'full-100'
            , cols: [[
                {field: 'id', width: 80, title: '編號', sort: true}
                , {field: 'ip', title: 'IP',align: 'center'}
                , {field: 'env', width: 120,title: '環境',align: 'center'}
                , {field: 'port', title: '埠',align: 'center'}
                , {field: 'isstatu', width: 120,title: '是否可修改', align: 'center'}
                , {field: 'note', title: '備註',align: 'center'}
            ]]
            , page: true
        });

table 表格是不能自動分頁的，需要後端程式碼支援。
page：true 設定後每次點選頁，會自動在提交頭資訊新增/xxxxx?page=1&limit=10

page 和 limit 會更具你的設定進行變更。

所以每一次點選就是一次請求。

後端端程式碼

假設我們取資料庫中的資料可以使用外掛paginator
需要引入from django.core.paginator import Paginator
下面以Django admin資料庫為例


# 分別獲取請求頭資訊中的page和limit
currentPage = request.GET.get('page', '')
limit = request.GET.get('limit', '')

# 獲取資料庫所有物件
subjects = AuthUserDataKeys.objects.all()

# 使用Paginator 建立分頁物件 limit參數列示以多少條分頁
paginator = Paginator(subjects, limit)

# 獲取對應頁的資料物件 currentPage 參數列示第幾頁
subject_obj = paginator.page(currentPage)

# 獲取資料長度不計算0
cou = AuthUserDataKeys.objects.all().count() + 1
obj = list()
# 迴圈獲取到的資料 
#計算公式 起行(int(currentPage) - 1) * int(limit) + 1
#計算公式 結束行((int(currentPage) - 1) * int(limit)) +(len(subject_obj) + 1)
for x in range((int(currentPage) - 1) * int(limit) + 1,((int(currentPage) - 1) * int(limit)) +(len(subject_obj) + 1)):
    #定義dic key
    data = ['id', 'ip', 'env', 'username', 'password','port', 'isstatu', 'note']
    t = list()
    #根據ID 獲取對應行的資料
    ks = AuthUserDataKeys.objects.get(id=x)
    t.append(ks.id)
    t.append(ks.ip)
    t.append(ks.env)
    t.append(ks.username)
    t.append(ks.password)
    t.append(ks.port)
    t.append(ks.isstatu)
    t.append(ks.note)
    # 轉化為Key：value
    dictionary = dict(zip(data, t))
    obj.append(dictionary)
    context = {"code": 0, "msg": "獲取資料成功","count": cou - 1, "data": obj}
# json 格式返回
return HttpResponse(json.dumps(context, ensure_ascii=False), content_type='application/json',charset='utf-8')

已知問題

因通過ID獲取對應行物件，故資料庫行id發生變更會導致異常。

可自行修改，修改邏輯，獲取所有行的id值，通過所獲取的id值進行獲取