apiTask/pagination.js at main · Bellje/apiTask · GitHub

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import { createElement } from "./functions.js";

export default function paginationLinks(data) {
    let { page, limit, total} = data
    // let total = 100;
    let pages = Math.ceil(total / limit);
    let currentPage = Number(page);

    let paginationWrapper = createElement('div', '', 'pagination-wrapper');

    const firstPaginationLink = createPaginationLinkElement ({
        currentPage,
        page:1,
        className: 'first-page-link',
        text:'First page',
        pageLink: 1,
        limit
    });
    const  previousPageLink = createPaginationLinkElement({
        currentPage,
        page: 1,
        className: 'previous-page-link',
        text: '<<Previous >>',
        pageLink: currentPage - 1,
        limit
    });

     paginationWrapper.prepend(firstPaginationLink, previousPageLink)


    for (let i = 1 ; i <= pages ; i++ ){
        const paginationElement = createPaginationLinkElement({
            currentPage,
            page: i,
            text: i,
            pageLink: i,
            limit
        });
        paginationWrapper.append(paginationElement)
    }
    const nextPaginationLink = createPaginationLinkElement({
        currentPage,
        page: pages,
        className:'next-page-link',
        text: '<<Next>>',
        pageLink: currentPage + 1,
        limit
    });
    const lastPaginationLink = createPaginationLinkElement ({
        currentPage,
        page: pages,
        className: 'last-page-link',
        text: 'Last page',
        pageLink:pages,
        limit
    })
    paginationWrapper.append( nextPaginationLink, lastPaginationLink)

    return paginationWrapper
}

function createPaginationLinkElement (data){
    // if(!currentPage || !page || !!text || !pageLink){
    //     return '';
    // }
    let {currentPage, page, className, text, pageLink, limit} = data;

    const pathName = document.location.pathname;
    console.log(pathName)
    const origin = document.location.origin;
    console.log(origin)

    let paginationElement ;

    if (currentPage === page){
        paginationElement = createElement('span',  text, 'pagination-link current-page-link');
    }else{
        paginationElement = createElement('a',  text, 'pagination-link')
        paginationElement.href = origin + pathName +`?page=${pageLink}&limit=${limit}`;
    }
if (className){
    paginationElement.classList.add(className)
}

return paginationElement;

}


// origin + pathName +