javascript - 스크롤 페이징

 

    <script type="text/javascript">

    var pages = 1;                                  // 스크롤 페이지

    var listSize = 5;                               // 한줄당 표시할 상품수

    var pageRowCount = 10;                          // 스크롤 한페이지 당 ROW 수

    var pageListCount = listSize * pageRowCount;    // 스크롤 한페이지 당 상품 수

    var resultProductList = null;

    function loadEventDetail(eventIdx) {

        $('#Progress_Loading').show();

        $.ajax({

            : (생략)

            success: function(result) {

                    if (result.ProductList) {

                        resultProductList = result.ProductList;

                        htmlStr = getEventProductList(resultProductList, pages);

                    }

                scroll(0, 0);

                }

        });

        $('#Progress_Loading').hide();

    }

    $(window).scroll(function () {

        if (resultProductList != null && resultProductList.length > 0) {

            if ((resultProductList.length - ((pages - 1) * pageListCount)) > 0) {

                var scrolltop = parseInt($(window).scrollTop()) + 550;

                //console.log("scrolltop=" + scrolltop);

                //console.log("documentheight=" + $(document).height());

                //console.log("windowheight=" + $(window).height());

                if (scrolltop >= $(document).height() - $(window).height() - 5) {

                    $("#divEventProduct").append(getEventProductList(resultProductList, pages).join(''));

                }

            }

        }

    });

    function getEventProductList(ProductList, page) {

        var htmlStr = new Array();

        var itemLength = ProductList.length;

        //var ulCnt = Math.ceil(itemLength / listSize);

        var startIdx = (page - 1) * pageRowCount;

        var endIdx = startIdx + pageRowCount;

        if (endIdx * listSize > itemLength) {

            var remainder = itemLength % pageListCount; // 몫값 계산

            endIdx = ((page - 1) * pageRowCount) + Math.ceil(remainder / listSize); // 올림처리

        }

        for (var ulIdx = startIdx; ulIdx < endIdx; ulIdx++) {

            htmlStr.push('<ul>');

            for (var liIdx = 0; liIdx < listSize; liIdx++) {

                var idx = (ulIdx * listSize) + liIdx;

                if (idx < itemLength) {

                    var item = ProductList[idx];

                    var prod_is_coldchain = item.IS_COLDCHAIN;

                    console.log(prod_is_coldchain)

                    var prodNum = item.PROD_NUM;

                    var prodStd = getConcatProdStds(item.PROD_STD1, item.PROD_STD2, item.PROD_STD3);

                    var prodUnit = $.trim(item.PROD_UNIT);

                    // 이미지 경로 및 이미지명 (M : 126*100) (S : 88 * 72)

                    var prodMImg = getProductImageFilePath(item.CATE_CODE1, item.CATE_CODE2, item.CATE_CODE3) + '/' + item.PROD_MIMG;

                    //var prodMImg = getProductImageFilePath(item.CATE_CODE1, item.CATE_CODE2, item.CATE_CODE3) + '/' + item.PROD_SIMG;

                    if (liIdx == 0) {

                        htmlStr.push('<li class="first">');

                    }

                    else {

                        htmlStr.push('<li>');

                    }

                    var prodNumString = item.PROD_NAME;

                    if (fn_StrByteLength(prodNumString) > 42) {

                        prodNumString = sliceByByte(prodNumString, 42) + "...";

                    }

                    var unitString = prodStd + ' / ' + prodUnit + ' / ' + item.PROD_MAKER;

                    if (fn_StrByteLength(unitString) > 42) {

                        unitString = sliceByByte(unitString, 42) + "...";

                    }

                    htmlStr.push('<span class="icon_event">');

                    htmlStr.push('<img src="/images/event/icon_event.gif" alt="이벤트" />');

                    if (prod_is_coldchain == "1") {

                        htmlStr.push('<img src="/images/ColdChain/icon-coldChain.gif" alt="cold">');

                    }

                    htmlStr.push('</span > ');

                    htmlStr.push('<a href="javascript:goToSearchPage(\'' + prodNum + '\');" class="thumbnail" style="height:100px;"><img src="' + prodMImg + '" alt="상품 이미지" onerror="productNoImage(\'M\');" /></a>');

                    htmlStr.push('<p class="ttl_pro"><a href="javascript:goToSearchPage(\'' + prodNum + '\');" name="prod2line">' + prodNumString+ '</a></p>');

                    htmlStr.push('<div class="information">');

                    htmlStr.push('<span name="prod2line">' + unitString + '</span>');

                    htmlStr.push('<span>' + item.MIN_VENDOR_NAME + '</span></div>');

                    htmlStr.push('<div class="price">');

                    htmlStr.push('<span class="icon"><img src="/images/Misomall/icon_special_price.jpg" alt="몰 특가" /></span>');

                    if (item.IS_CONSULT == 1)

                        htmlStr.push('<strong><span class="won">견적상담</span></strong>');

                    else

                        htmlStr.push('<strong>' + item.MIN_PRICE.toNumberFormat() + '<span class="won">원</span></strong>');

                    // B2B 경우

                    if ("@Misomall.Front.MisoMember.MallGroupCode.ToString()" == "3") {

                        htmlStr.push('<strong style="font-size:15px;color:#0000ff">' + item.MISO_POINT.toNumberFormat() + '<span class="won">P</span></strong>');

                    }

                    htmlStr.push('</div>');

                    htmlStr.push('</li>');

                }

                else {

                    htmlStr.push('<li><span class="hidden">상품이 없을 경우</span></li>');

                }

                //var item = ProductList[idx];

            }

            htmlStr.push('</ul>');

        }

        pages = page + 1;

        return htmlStr;

    }

    </script>