JS 페이지 2

6620 단어 js
호출:
var pageChange = function (index) {
            var html = pager("divid", index, 5, 1000, pageChange, { showGoTo: false, showFirst: false });
        }

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

        var theOpt = {
            barSize: 5, //            
            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;
            if (opt.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;
        }
        var handles = window.myPagerChanges = (function (x) { return x; } (window.myPagerChanges || {}));

        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 = "";
            return "";
        }

        if (totalPage <= theOpt.barSize) {
            startPage = 1;
            endPage = this.totalPage;
            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 {                                          //     
                startPage = pageIndex - Math.ceil(theOpt.barSize / 2) + 1;
                endPage = pageIndex + Math.floor(theOpt.barSize / 2);
            }
            if (totalPage <= (theOpt.barSize * 1.5)) {
                theOpt.showLast = theOpt.showFirst = false;
            }
        }

        function _getLink(index, txt) {
            if (!txt) txt = index;
            return "<a href='javascript:;' style='margin: 2px 5px;border: 1px solid #6d8cad;color: #0269BA;padding: 2px 5px;text-decoration: none;' onclick='myPagerChanges[\"" + divPager + "\"](" + index + ")'>" + txt + "</a>";
        }

        var barHtml = "";  //   
        barHtml += pageIndex == 1 ? "" : _getLink(pageIndex - 1, "   ");
        if (theOpt.showFirst) {
            barHtml += _getLink(1) + "<span>...</span>";
        }
        for (var index = startPage; index <= endPage; index++) {

            if (index == pageIndex) {
                barHtml += "<span style='color:red;font-weight:blod; '>" + index + "</span>";
            }
            else {
                barHtml += _getLink(index);
            }
        }
        if (theOpt.showLast) {
            barHtml += "<span>...</span>" + _getLink(totalPage);
        }
        barHtml += pageIndex == totalPage ? "" : _getLink(pageIndex + 1, "   ");

        var gotoHtml = "";  //goto    
        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 += "<input type='text' onkeypress='if(event.keyCode==13){myPagerChanges[\"" + divPager + "\"](" + indexVal + ")}' id='" + txtid + "' value=" + pageIndex + " style='width:30px'>";
                gotoHtml += " <input type='button' class='page_bg' value='go' onclick='myPagerChanges[\"" + divPager + "\"](" + indexVal + ")'>";
            }
        }

        //    
        var pagerHtml = theOpt.barTemplate.replace("{bar}", barHtml)
                                  .replace("{totalCount}", totalCount)
                                  .replace("{pageIndex}", pageIndex)
                                  .replace("{totalPage}", totalPage)
                                  .replace("{goto}", gotoHtml);

        document.getElementById(divPager).innerHTML = pagerHtml;
        return pagerHtml;
    };

좋은 웹페이지 즐겨찾기