记录一个自己常用的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("")); }