Vue.js Pagination Button (처음으로, 이전, 다음, 마지막 페이지 이동처리)

페이징 작업을 해야해서 찾아봤다.

모르겠다.

고로 만든다.

var pageNum = 1,   
    pageCount= 10,
    pageNumCount = 5,
    startPageNum = 1,
    endPageNum = 5,
    pageLimit = 5;

var authSettings = new Vue({
    el: '#contents',
    data: {
        accessLogList : [],
        pageNum : 0
    },
    mounted(){        
        searchList();
    },
    methods: {
        firstPage:function(){
            pageNum = 1;
            startPageNum = 1;
            endPageNum = pageNumCount;
            contentsVue.pageNum=pageNum;
        },
        prevPage:function(){
            if(startPageNum < pageNum){
                pageNum = pageNum -1;
                contentsVue.pageNum=pageNum;
            }else if(startPageNum==pageNum&&startPageNum!=1){
                pageNum = pageNum - pageNumCount;
                startPageNum = startPageNum - pageNumCount;
                endPageNum = startPageNum + pageNumCount -1;
                contentsVue.pageNum=pageNum;
            }
        },
        nextPage:function(){
            if(pageNum < endPageNum&&pageNum!=pageLimit){
                pageNum = pageNum + 1;
                contentsVue.pageNum=pageNum;
            }else if(endPageNum==pageNum && endPageNum != pageLimit){
                pageNum = pageNum + 1;
                startPageNum = pageNum;
                endPageNum = endPageNum + pageNumCount;
                contentsVue.pageNum=pageNum;
            }
        },
        lastPage:function(){
            pageNum = pageLimit;
            startPageNum = parseInt(pageLimit/pageNumCount)*pageNumCount + 1;
            endPageNum = pageLimit;
            contentsVue.pageNum = pageNum;
        },
    },
    watch:{
        pageNum:function(){
            searchList()
        }
    }
});

function clickPageNum(index){
    pageNum = index;
    authSettings.pageNum = pageNum;
}

function searchList(){
    $.ajax({
        url: '/myasset/mypage/getAccessLog',
        type: 'POST',
        dataType: 'json',
        data: {
            pageNum: pageNum,
            startDate: startDate,
            endDate: endDate
        },
        error: function (data, status, error) {
            console.log("에러 >> " + JSON.stringify(data));
        },
        success: function (data, textStatus) {
            console.log(data);
            if(data.size!=0){
                $(data.list).each(function(index, item){
                    item.index = index+(pageNum-1)*10+1;
                    let temp = item.dateTime;
                    item.dateTime = temp.substr(0,4)+"-"+temp.substr(4,2)+'-'+temp.substr(6,2)
                });
                authSettings.accessLogList = data.list;
                pageLimit = Math.ceil(data.size/pageCount);
                pagination(pageLimit, pageNum);
            }
        }
    })
}

function pagination(pageSize,selectedNum){
    let innerHtml = '';
    let pageNumTemplate = $('#pageNumTemplate').html();
    for(let i=startPageNum;i<pageSize+1;i++){
        if(i==selectedNum){
            innerHtml += pageNumTemplate.replace('paging','paging active').replaceAll('{{i}}',i);
        } else{
            innerHtml += pageNumTemplate.replaceAll('{{i}}',i);
        }
        if(i==endPageNum){
            break;
        }
    }
    $('#pageNumDiv').html(innerHtml);
}

 

<div class="btn-pagination">
    <a class="paging first" href="javascript:void(0)" data-index=""><i class="icon-paging-first"></i></a>
    <a class="paging prev" href="javascript:void(0)" data-index="" @click="prevPage"><i class="icon-paging-prev"></i></a>
    <div id="pageNumDiv"></div>
    <a class="paging next" href="javascript:void(0)" data-index="" @click="nextPage"><i class="icon-paging-next"></i></a>
    <a class="paging last" href="javascript:void(0)" data-index=""><i class="icon-paging-last"></i></a>
</div>

<script id="pageNumTemplate" type="template/text">
    <a class="paging" href="javascript:void(0);clickPageNum({{i}});" data-index="{{i}}">{{i}}</a>
</script>