日期:2014-05-16  浏览次数:20444 次

记录一个自己常用的JS 分页 + 渲染脚本
 function InitData(db,_pageindex) 
     {
         /*渲染页面分页元素*/
         var InitPages = function () 
         {
             /*显示当前页前后多少个链接*/
             var showLinkCount = 3;
             
             var PageStr = new Array();

             if (_pageindex == 0) { PageStr.push("<span class=\"current prev\">首页</span>"); }
             else { PageStr.push("<a onclick=\"getData(0);\">首页</a>"); }

             if (_pageindex - 1 < 0) { PageStr.push("<span class=\"current prev\">? 上一页</span>"); }
             else { PageStr.push("<a onclick=\"getData(" + (_pageindex - 1) + ");\">? 上一页</a>"); }

             for (var i = 0; i < db.pageCount; i++) 
             {
                 if (i == _pageindex) { PageStr.push("<span class=\"current\">" + (i + 1) + "</span>"); }

                 else if ((i >= _pageindex && i <= _pageindex + showLinkCount) || (i <= _pageindex && i >= _pageindex - showLinkCount)) {
                     PageStr.push("<a onclick=\"getData(" + i + ");\">" + (i + 1) + "</a>");
                 }

                 else if ((i >= _pageindex + showLinkCount && i <= _pageindex + (showLinkCount + 3)) || (i <= _pageindex - showLinkCount && i >= _pageindex - (showLinkCount+3))) {
                     PageStr.push(".");
                 }
             }

             if (_pageindex + 1 > (db.pageCount - 1)) { PageStr.push("<span class=\"current prev\">下一页 ?</span>"); }
             else { PageStr.push("<a onclick=\"getData(" + (_pageindex + 1) + ");\">下一页 ?</a>"); }

             if (_pageindex == db.pageCount - 1) { PageStr.push("<span class=\"current next\">尾页</span>"); }
             else { PageStr.push("<a onclick=\"getData(" + (db.pageCount - 1) + ");\">尾页</a>"); }
             $("#page").html(PageStr.join(""));
         };

         InitPages();

         var photosStr=new Array();
         
         for (var i = 0; i < db.Photos.length; i++) 
         {
             photosStr.push('<li key="' + db.Photos[i].id + '">' +
           '<div class="photo">' +
           '<a href="/Images/UserImgs/<%=userId %>/Photos/' + db.Photos[i].imageurl + '" title="' + db.Photos[i].title + '" class="pic">' +
           '<img src="/Images/UserImgs/<%=userId %>/Photos/130/' + db.Photos[i].imageurl + '" />' +
           '</a>' +
           '<a href="#a" onclick="changeHeadPhoto(this,\'' + db.Photos[i].imageurl + '\')">设为头像</a> ' +
           '<a href="#a" onclick="delPhoto(this);">删除</a> ' +
           '<a href="PhotoInfo.aspx?id='+db.Photos[i].id+'">编辑</a>' +
           '</div>' +
            '<p>' + db.Photos[i].title + '</p>' +
           '</li>');
         }

         $(".photoList").html(photosStr.join(""));
     }