jquery를 이용한 간단한 페이징

하단에 paging 출력

js

//페이지 네비게이션 시작
function setPageNavi(total){

  //--페이지 나타내기--
  // var listno	= $("#ln").val();
  // var cp		= $("#cp").val();
  var listno	= 10; // 페이지당 출력갯수
  var cp		= 1; // 현재페이지
  var pageno	= 10;// 페이지 블록
  var TP = Math.ceil(total / listno);// ###   페이지 하단의 총 페이지수
  var CB = Math.ceil(cp / pageno);
  var SP = (CB - 1) * pageno + 1;
  var EP = (CB * pageno);
  var TB = Math.ceil(TP / pageno);
  var page = 0;
  var rtn = "";
  var emp	= "";

  if ( CB > 1 ) {
    page = SP - 1;
    rtn += "<a class='pageNum' cp='"+page+"'>이전</a>";
  }// else rtn += "이전";

  //###   LISTING NUMBER PART

  for (var i = SP; i <= EP && i <= TP ; i++) {
    if(cp == i) emp = "<b>"+i+"</b>";
    else emp = i;
    rtn += " <a class='pageNum' cp='"+i+"'>"+emp+"</a>";
  }

  //###   NEXT or END PART
  if (CB < TB) {
    page = EP + 1;
    rtn += " <a class='pageNum' cp='"+page+"'>다음</a>";
  } else {
    //rtn += "다음";
  }
  console.log('rtn >>', rtn);
  $("#pageNavi").html(rtn);

}

setPageNavi(55);

html

<div id="pageNavi"> </div>

See the Pen jquery paging by younghyeong ryu (@wangta69) on CodePen.