django+angular实现分页

需求

实现django后端分页并且在前端显示出来

实现

一般可以通过django的分页模块实现，代码比较简单，仅供参考

后端代码部分

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54


from django.db.models import Q
from django.core.paginator import Paginator

def pipeline_tasks(request):
    """Get all Pipeline Tasks."""
    # pagesize is how much item a page has
    pagesize = request.GET.get("pagesize", 0)
    # which page, the first, the second and so on
    pageindex = request.GET.get("pageindex", 10)

    keyword = request.GET.get("keyword", "")
    p_id = request.GET.get("p_id", 0)

    ret = GetAllPipelineTasks(pagesize=pagesize,
                              pageindex=pageindex,
                              keyword=keyword,
                              p_id=p_id)
    return ret

def GetAllPipelineTasks(pagesize=0, pageindex=0, keyword='', p_id=0):
    """List all pipelines with fuzzy search."""
    pipeline_task_objs = PipelineTask.objects
    if keyword:
        pipeline_task_objs = pipeline_task_objs.filter(
            Q(data_json__icontains=keyword)
            | Q(status__icontains=keyword)
            | Q(result__icontains=keyword)
            | Q(create_timestamp__icontains=keyword)
            | Q(update_timestamp__icontains=keyword))

    if p_id:
        pipeline_task_objs = pipeline_task_objs.filter(p_id=p_id)

    pipeline_task_objs = pipeline_task_objs.all().order_by('-id')

    pipeline_tasks = [
        pipeline_task.to_json() for pipeline_task in pipeline_task_objs
    ]

    paginator = Paginator(pipeline_tasks, pagesize)

    page_pipelinetask = paginator.get_page(pageindex)

    data = {
        'total_count': len(pipeline_task_objs),
        'page_count': paginator.num_pages,
        'page_index': pageindex,
        'page_size': pagesize,
        'page': {
            'data': page_pipelinetask.object_list,
            'count': paginator.count
        }
    }
    return fast_return(10920, data=data)

前端部分

我使用的是devui框架，所以用了PaginationModule这个模块，自己的进行适当调整即可。

html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


<d-pagination
    [size]="'sm'"
    [total]="pager.total"
    [(pageSize)]="pager.size"
    [(pageIndex)]="pager.index"
    [canViewTotal]="true"
    [canChangePageSize]="true"
    [canJumpPage]="true"
    [maxItems]="5"
    (pageIndexChange)="onPageChange($event)"
    (pageSizeChange)="onSizeChange($event)"
    [pageSizeOptions]="pager.options"
>
</d-pagination>

component.ts

    pager = {
        total: 0,
        index: 1,
        size: 20,
        options: [20, 50, 100, 200]
    };

    private getList() {
        this.busy = this.pipelineService
            .getAllTasks(this.pager, this.keyword, this.p_id)
            .subscribe((res: any) => {
                const data = JSON.parse(JSON.stringify(res));
                this.tasksDataSource = data.data.page.data;
                this.pager.total = data.data.total_count;
            });
    }

    onPageChange(e: any) {
        this.pager.index = e;
        this.getList();
    }

    onSizeChange(e: any) {
        this.pager.size = e;
        this.getList();
    }

    reset() {
        this.searchForm = {
            borderType: 'normal',
            size: 'normal',
            layout: 'auto'
        };
        this.pager.index = 1;
        this.getList()
    }

    onSearch() {
        this.pager.index = 1;
        this.getList();
    }