자바스크립트 페이징 코드 예시 공유(js 페이징)_javascript 기술

전화:

코드 복사 코드는 다음과 같습니다.

var pageChange = function(index) {
         html = pager("divid", index, 5, 1000, pageChange, { showGoTo: false, showFirst: false });
    }

구현:

코드 복사 코드는 다음과 같습니다.

pager = function (divPager, pageIndex, pageSize, totalCount, pageChange, opt) {

var theOpt = {
barSize: 5, //페이징에 표시되는 페이지 수 bar
barTemplate: "{bar} 총 {totalPage} 페이지 {totalCount} 항목 {goto}", //템플릿 표시
autoHide: true, //자동 숨기기 여부
showFirst: true, // totalPage>barSize에서 첫 번째 페이지 링크를 자동으로 표시할지 여부
showLast: true, // totalPage>barSize일 때 마지막 페이지 링크를 자동으로 표시할지 여부
showGoTo: true, // GoTo 표시 여부
autoHideGoTo : true / /너무 적은 경우 GoTo 자동 숨기기 여부
};

if (opt) {
if (opt.barSize)
theOpt.barSize = opt.barSize ; .barTemplate)
theOpt.barTemplate = opt.barTemplate;
if (opt.autoHide == false)
theOpt.autoHide = false;
if (opt.showFirst == false)
theOpt.showFirst = false;
if (opt.showLast = false)
theOpt.showLast = false;
if (opt.showGoTo == false)
theOpt.showGoTo = false;
if (opt.autoHideGoTo == false)
                 theOpt.autoHideGoTo = false ));

if (!myPagerChanges[divPager]) myPagerChanges[divPager] = pageChange;

var startPage = 0; //페이징 막대 시작 페이지
var endPage = 0; //페이징 막대 종료 페이지
var showFirst = true;
var showLast = true;


if (isNaN(pageIndex)) {
pageIndex = 1;
}
pageIndex =parseInt(pageIndex);
if (pageIndex <= 0)
pageIndex = 1;
if (pageIndex * pageSize > totalCount) {
pageIndex = Math.ceil( totalCount / pageSize);
}

if (totalCount == 0) { //데이터가 없는 경우
document.getElementById(divPager).innerHTML = "";
return "";
}

var totalPage = Math.ceil(totalCount / pageSize);
if (theOpt.autoHide && totalCount <= pageSize) { //자동 숨기기
document.getElementById(divPager ).innerHTML = "";
                                                                    페이지 ;
          theOpt.showLast = theOpt.showFirst = false;
           
else {
if (pageIndex <= Math.ceil(theOpt.barSize / 2)) { //처음 몇 페이지
startPage = 1;
endPage = theOpt.barSize;
theOpt.showFirst = false;
}
else if (pageIndex > (totalPage - theOpt.barSize / 2)) { //마지막 몇 페이지
startPage = totalPage - theOpt.barSize 1;
endPage = totalPage;
theOpt.showLast = false;
}
else {                                                                  ~ > 거짓 ;
}
}

function _getLink(index, txt) {
                                    style='margin: 2px 5px;border: 1px solid #6d8cad;color: 0269BA;패딩: 2px 5px ;텍스트 장식: 없음;' onclick='myPagerChanges["" divPager ""](" index ")'> ;" txt "";
}

var barHtml = ""; //페이지 bar
barHtml = pageIndex == 1 ? "" : _getLink(pageIndex - 1, "이전 페이지");
if (theOpt.showFirst) {
barHtml = _getLink(1 ) "...";
}
for ( var index = startPage; index <= endPage; index ) {

if (index == pageIndex) {
barHtml = "" 인덱스 "";
                                               if (theOpt.showLast ) {
barHtml = "..." _getLink(totalPage);
}
barHtml = pageIndex == totalPage ? "" : _getLink(pageIndex 1, "다음 페이지");

var gotoHtml = ""; //상자 및 버튼으로 이동
if (theOpt.showGoTo && theOpt.barTemplate.indexOf("{goto}") > 0) {
if (( theOpt.autoHideGoTo && totalPage > 15) || theOpt.autoHideGoTo == false) {
var txtid = divPager "_goIndex";
var indexVal = "document.getElementById("" txtid " ") .value" ;
gotoHtml = "";
             gotoHtml = " ";
         }
     }

     //替换模板
     var pagerHtml = theOpt.barTemplate.replace(" {bar}", barHtml)
                             .replace("{totalCount}", totalCount)
                          .replace("{pageIndex}", pageIndex)
                              .replace("{totalPage}", totalPage) };