jQuery怎么实现一个分页组件功能

/**
 * @param {Number} page 当前页
 * @param {Number} totalPage 总页数 
 */
function pagination(page, totalPage) {
  var str = '';
  // todo...

  return str;
}

// 运行函数，打印出值

var ret = pagination(4, 30)

console.log(ret)

>上一页 1 2 3 4 5 6 7 ... 30 下一页

function pagination(page, totalPage) {
  var str = page;
  // 这里实现当前页面显示前后三项功能
  for(var i=1; i< totalPage; i++) {
    if(page-i>1) {
      str = page-i +' '+ str;
    }
    if(page + i < totalPage) {
      str = str + ' ' + (page+i)
    }
  }

  // 以page为中心，向左右扩展

  // 向左，先判断当前page向左的第四个数是否大于 1
  if(page-4 > 1) {
    str = '... ' + page;
  }
  // 继续向左判断
  if(page >1) {
    str = "上一页" + '... ' +1 +' ' +str;
  }
  // 向右，判断当前page向右的第四个数字是否小于 totalPage
  if(page + 4 < totalPage) {
    str = '... '+ str;
  }
  if(page < totalPage) {
    str = str +' ' + totalPage +' '+ '下一页';
  }
  return str;
}

  var total = 30;
  for(var i = 1; i< total; i++) {
   var ret = showPage(i, total);
   console.log(ret)
  }

  function pagination(page, totalPage) {
    var str = '
'+page+'
';
    for(var i=1; i<=3; i++) {
      if(page - i > 1) {
        str = '
'+(page-i)+'
' +' '+ str;
      }
      if(page + i < totalPage) {
        str = str +" "+'
'+(page+ i)+'
'
      }
    }
    if(page-4 >1) {
      str = '
... 
' +str;
    }
    if (page >1) {
      str= '
上一页
'+ ' '+'
1
' +' '+ str;
    }

    if(page+4< totalPage) {
      str = str+ '
 ...
';
    }
    if(page < totalPage) {
      str = str + " " +'
'+totalPage+'
' +" " +'
下一页
'
    }
    return str;
  }
  var totalPage = 30;

  var str = pagination(1, totalPage);
  var wrap = $("#pagination-list");
  // 这里引用了 jQuery
  wrap.html(str)
    .on('click', '.page-item', function () {
      var cur = parseInt($(this).text());
      wrap.html(pagination(cur, totalPage));
    });