getdata.js

$(document).ready(function(){
  GetData(1);
});

function GetData(_page){
    var _offset = _page;
    var _data_list = "{{ data_list|join('|') }}";
    if(_data_list != ''){
      $.ajax({
        url : '/getData',
        type : 'POST',
        data : { offset:_offset, ip:_data_list},
        success: function(res){
            var Obj = JSON.parse(res);
            $('#List').empty();
            $('#List').append(Obj[0]);
            var total = "{{ total_counts }}"
            var itemsPerPage = Obj[1]['itemsPerPage'];
            var pageCount = total/itemsPerPage;
            var pageRem = total%itemsPerPage;
            if(pageRem !=0 ){
                pageCount = Math.floor(pageCount)+1;
            }

            $('#pagination').empty();
            var pageStart = $('#hdnStart').val();
            var pageEnd = $('#hdnEnd').val();

            if(pageStart>10){
                var aPrev = $('<a/>').attr({'href':'#'},{'aria-label':'Previous'})
                            .append($('<span/>').attr('aria-hidden','true').html('<<'));
                $(aPrev).click(function(){
                    $('#hdnStart').val(Number(pageStart) - 10);
                    $('#hdnEnd').val(Number(pageStart) - 10 + 9);
                    GetData(Number(pageStart) - 10);
                });
                var prevLink = $('<li/>').append(aPrev);
                $('#pagination').append(prevLink);
            }

            for(var i=Number(pageStart);i<=Number(pageEnd);i++){
                if (i > pageCount){
                    break;
                }

                var aPage = $('<a/>').attr('href','#').text(i);

                $(aPage).click(function(i){
                    return function(){
                        GetData(i);
                    }
                }(i));
              
                var page = $('<li/>').append(aPage);
                if((_page)==i){
                    $(page).attr('class','active');
                }

                $('#pagination').append(page);
            }
            if ((Number(pageStart) + 10) <= pageCount){
                var nextLink = $('<li/>').append($('<a/>').attr({'href':'#'},{'aria-label':'Next'})
                                 .append($('<span/>').attr('aria-hidden','true').html('>>').click(function(){
                                     $('#hdnStart').val(Number(pageStart) + 10);
                                     $('#hdnEnd').val(Number(pageStart) + 10 + 9);
                                     GetData(Number(pageStart) + 10);

                })));
                $('#pagination').append(nextLink);
            }
        },
        error: function(error){
            console.log(error);
        }
      });
    }
}