Pure JavaScript Pagination Case

Applied to the paging situation, we use the total number of records, the number of records per page, the current page number and other data to display the html effect. The data is the same, but the display effect is different.

Let's calculate the data first:

var SplitPage=function(allcount,onePagecount,currPage,styleShowNum){
				/**
				 * 记录总数
				 */
				this.allcount=allcount;
				/**
				 * 每一页记录数
				 */
				this.onePagecount=onePagecount;
				/**
				 * 目前页码
				 */
				this.currPage=currPage;
				/**
				 * 一行显示几个
				 */
				this.styleShowNum=styleShowNum;

				/**
				 * 分成页数
				 */
				this.pageNum=0;
				
				this.left=0;
				this.right=0;				
				this.showHTML=function(pstyle) {
					// <a href='a.do?p=1' class='curr'>1</a>,2,3,4,5,6,7,8
					this.getlimit();
					return pstyle.genHtml(allcount,left, right, currPage,pageNum,onePagecount);
				}

				this.getlimit=function(){

					//计算分成多少页
					pageNum= Math.ceil(allcount / onePagecount) ;
					
					var half=Math.round(styleShowNum / 2);
					 //左右边界固定
			        if (pageNum <= styleShowNum)
			        {
			            left = 1;
			            right = pageNum;
			        }//右边界固定
			        else if (currPage >= pageNum - half)
			        {
			            left = pageNum - styleShowNum + 1;
			            right = pageNum;
			        }//左边界固定
			        else if (currPage <= half)
			        {
			            left = 1;
			            right = styleShowNum;
			        }//左右边界都不固定
			        else
			        {
			            left = currPage - half+1;
			            right = currPage + Math.floor(styleShowNum/2);    
			        }
				}				
		}
   

For example: 8 points appear on our page, 1, 2, 3, 4, 5, 6, 7, 8.

When you click 1, 2, 3, 4, no changes are required. start=1, end=8, the left end is fixed

When you click 5, it needs to become 2, 3, 4, 5, 6, 7, 8, 9. start=2, end=9, both ends are not fixed

If there are only 10 pages, 3, 4, 5, 6, 7, 8, 9, 10. Click 7, 8, 9, 10 without any changes. start=3, end=10, the right end is fixed.

So if the parameter from the server is the current page p, we can calculate the starting point and ending point and display a series of page numbers in a loop.

Note: 8 is a double number. When it is singular, it is easier. The left and right ends of the current page are equal, such as 1, 2, 3, 4, 5.

After calculating the data, how to display it next

function pageGo(p){
			window.location="/computers?p="+p;
		}

		var PageStyleA =function() {

			this.genHtml=function(allcount,start,end,cur,pageNum,onePagecount) {
				
				sb = "<span>显示第"+((cur-1)*onePagecount+1)+" - "+cur*onePagecount+"条记录（共"+allcount+
				"条记录）<a href=\"#\" οnclick=\"pagego(0)\""+ " class=\"nextPage\">首页</a>";
				if (cur <= start)
					sb+="<span class=\"upPage\">上一页</span>";
				else
					sb+="<a href=\"#\" οnclick=\"pagego(" + (cur - 1) + ")\""+ " class=\"nextPage\">上一页</a>";

				for ( i = start; i <= end; i++) {
					if (i == cur)
						sb+="<span class=\"curr\">" + i + "</span>";
					else
						sb+="<a href=\"#\" οnclick=\"pagego(" + i + ")\">" + i + "</a>";
					if(i!=end){
						sb+="|";
					}
				}

				if (cur >= end)
					sb+="<span class=\"nextPage\">下一页</span>";
				else
					sb+="<a href=\"#\" οnclick=\"pagego(" + (cur + 1) + ")\""+ " class=\"nextPage\">下一页</a>";				
				sb += "<a href=\"#\" οnclick=\"pagego("+pageNum+")\""+ " class=\"nextPage\">尾页</a>";
				sb += "<input type='text' class='skiptxt' id='txtpageGo'/> <input οnclick='p=document.getElementById(\"txtpageGo\").value;if(p!=\"\"&&!isNaN(p)){pagego(p);}' type='button' value='跳转'/>";
				sb+="<sctipt"
				return sb;
			}

			
		}

Display is to draw html based on data

how to use

<div class="pageBlock" id="pageBlock"></div>

var splitPage=new SplitPage(127,10,4,8);
document.getElementById('pageBlock').innerHTML=splitPage.showHTML(new PageStyleA());

If you need other display methods,

Then create a new class PageStyleB

css:

.pageBlock{ padding:20px 0; text-align:left;}
.pageBlock a,.pageBlock span{ padding-right:8px; padding-left:3px;}
.pageBlock .upPage{ margin-right:20px;}
.pageBlock .nextPage{ margin-left:20px;}
.pageBlock span.curr{ font-weight:700; color:#f90;}
.pageBlock a{ cursor: pointer;}
.pageBlock .skiptxt{ width:50px;}

File link

http://pan.baidu.com/share/link?shareid=436216&uk=1510139133