const createPagination = (totalPages, page) => {
    let liTag = '';
    let activeLi;
    let beforePages = page - 1;
    let afterPages = page + 1;
    if (page > 1) {
        liTag += `<li class="prev" id="${'page' + (page - 1)}" ><span> ＜ </span></li>`;
    }
    if (page > 2) {
        liTag += `<li class="num" id="${'page' + 1}"><span>1</span></li>`;
        if (page > 3) {
            liTag += `<li class="line"><span>|</span></li>`;
        }
    }

    if (totalPages > 3) {
        if (page == totalPages) {
            beforePages = beforePages - 2;
        } else if (page == totalPages - 1) {
            beforePages = beforePages - 1;
        }

        if (page == 1) {
            afterPages = afterPages + 2;
        } else if (page == 2) {
            afterPages = afterPages + 1;
        }
    }
    for (let pageLength = beforePages; pageLength <= afterPages; pageLength++) {
        if (pageLength > totalPages) {
            continue;
        }
        if (pageLength == 0) {
            pageLength = pageLength + 1;
        }
        if (page == pageLength) {
            activeLi = 'active';
        } else {
            activeLi = '';
        }
        liTag += `<li class="num ${activeLi}" id="${'page' + pageLength}" ><span>${pageLength}</span></li>`;
    }

    if (page < totalPages - 1) {
        if (page < totalPages - 2) {
            liTag += `<li class="line"><span>|</span></li>`;
        }
        liTag += `<li class="num" id="${'page' + totalPages}"><span>${totalPages}</span></li>`;
    }
    if (page < totalPages) {
        liTag += `<li class="next" id="${'page' + (parseInt(page) + 1)}"><span>＞</span></li>`;
    }
    return liTag;
};
