JS 伪分页+table (1)

效果图

HTML 

			<table id="table1">
				<thead>
					<th>标题1</th>
					<th>标题2</th>
					<th>标题3</th>
					<th>标题4</th>
					<th>标题5</th>
				</thead>
				<tbody id="table2">
					<tr>
						<td bgcolor="#FFFFFF">1</td>
						<td bgcolor="#FFFFFF">1</td>
						<td bgcolor="#FFFFFF">1</td>
						<td bgcolor="#FFFFFF">1</td>
						<td bgcolor="#FFFFFF">1</td>
					</tr>
					<tr>
						<td bgcolor="#FFFFFF">2</td>
						<td bgcolor="#FFFFFF">2</td>
						<td bgcolor="#FFFFFF">2</td>
						<td bgcolor="#FFFFFF">2</td>
						<td bgcolor="#FFFFFF">2</td>
					</tr>
					<tr>
						<td bgcolor="#FFFFFF">3</td>
						<td bgcolor="#FFFFFF">3</td>
						<td bgcolor="#FFFFFF">3</td>
						<td bgcolor="#FFFFFF">3</td>
						<td bgcolor="#FFFFFF">3</td>
					</tr>
					<tr>
						<td bgcolor="#FFFFFF">4</td>
						<td bgcolor="#FFFFFF">4</td>
						<td bgcolor="#FFFFFF">4</td>
						<td bgcolor="#FFFFFF">4</td>
						<td bgcolor="#FFFFFF">4</td>
					</tr>
					<tr>
						<td bgcolor="#FFFFFF">5</td>
						<td bgcolor="#FFFFFF">5</td>
						<td bgcolor="#FFFFFF">5</td>
						<td bgcolor="#FFFFFF">5</td>
						<td bgcolor="#FFFFFF">5</td>
					</tr>
					<tr>
						<td bgcolor="#FFFFFF">6</td>
						<td bgcolor="#FFFFFF">6</td>
						<td bgcolor="#FFFFFF">6</td>
						<td bgcolor="#FFFFFF">6</td>
						<td bgcolor="#FFFFFF">6</td>
					</tr>
					<tr>
						<td bgcolor="#FFFFFF">7</td>
						<td bgcolor="#FFFFFF">7</td>
						<td bgcolor="#FFFFFF">7</td>
						<td bgcolor="#FFFFFF">7</td>
						<td bgcolor="#FFFFFF">7</td>
					</tr>
					<tr>
						<td bgcolor="#FFFFFF">8</td>
						<td bgcolor="#FFFFFF">8</td>
						<td bgcolor="#FFFFFF">8</td>
						<td bgcolor="#FFFFFF">8</td>
						<td bgcolor="#FFFFFF">8</td>
					</tr>
					<tr>
						<td bgcolor="#FFFFFF">9</td>
						<td bgcolor="#FFFFFF">9</td>
						<td bgcolor="#FFFFFF">9</td>
						<td bgcolor="#FFFFFF">9</td>
						<td bgcolor="#FFFFFF">9</td>
					</tr>
					<tr>
						<td bgcolor="#FFFFFF">10</td>
						<td bgcolor="#FFFFFF">10</td>
						<td bgcolor="#FFFFFF">10</td>
						<td bgcolor="#FFFFFF">10</td>
						<td bgcolor="#FFFFFF">10</td>
					</tr>
					<tr>
						<td bgcolor="#FFFFFF">11</td>
						<td bgcolor="#FFFFFF">11</td>
						<td bgcolor="#FFFFFF">11</td>
						<td bgcolor="#FFFFFF">11</td>
						<td bgcolor="#FFFFFF">11</td>
					</tr>
				</tbody>
			</table>
			<span id="spanFirst">首页</span> 
			<span id="spanPre">上一页</span> 
			<span id="spanPageNum"></span><!--当前页 -->				
			/
			<span id="spanTotalPage"></span><!--总页数 -->		
			<span id="spanNext">下一页</span>
			<span id="spanLast">尾页</span>			
		</div>

 JS 需要引入 jquery.js

			var theTable = document.getElementById("table2"); //table
			var totalPage = document.getElementById("spanTotalPage"); //总页数
			var pageNum = document.getElementById("spanPageNum"); //第几页
			var spanPre = document.getElementById("spanPre"); //上一页
			var spanNext = document.getElementById("spanNext"); //下一页
			var spanFirst = document.getElementById("spanFirst"); //首页
			var spanLast = document.getElementById("spanLast"); //尾页

			var numberRowsInTable = theTable.rows.length; //得到table数据条数
			var pageSize = 3; //每页显示条数
			var page = 1; //默认第一页

			//下一页
			function next() {
				hideTable();//先隐藏所有数据
				currentRow = pageSize * page;//当前页*每页条数=显示总条数
				maxRow = currentRow + pageSize;//下一页需要显示总条数
				//显示总条数大于table数据条数
				if (maxRow > numberRowsInTable)
				{
					maxRow = numberRowsInTable;
				} 				
				
				//遍历数据,显示需要显示得数据
				for (var i = currentRow; i < maxRow; i++) {
					theTable.rows[i].style.display = '';
				}
				//当前页+1
				page++;
				//最后一页情况
				if (maxRow == numberRowsInTable) {
					nextText(); //下一页不可点动
					lastText(); //尾页不可点动
				}
				showPage(); //当前页
				preLink(); //显示上一页能点动链接
				firstLink();//显示首页能点动链接
			}

			//上一页
			function pre() {
				hideTable();
				page--;
				currentRow = pageSize * page;
				maxRow = currentRow - pageSize;
				if (currentRow > numberRowsInTable){
					currentRow = numberRowsInTable;
				} 
				for (var i = maxRow; i < currentRow; i++) {
					theTable.rows[i].style.display = '';
				}

				if (maxRow == 0) {
					preText(); //上一页不可点动
					firstText();//首页不可点动
				}
				showPage();//当前页
				nextLink();//显示下一页能点动链接
				lastLink();//显示下一页能点动尾页
			}

			//首页
			function first() {
				hideTable();
				page = 1;
				for (var i = 0; i < pageSize; i++) {
					theTable.rows[i].style.display = '';
				}
				showPage();
				preText();
				nextLink();
				lastLink();
			}

			//最后一页
			function last() {
				hideTable();
				page = pageCount();
				currentRow = pageSize * (page - 1);
				for (var i = currentRow; i < numberRowsInTable; i++) {
					theTable.rows[i].style.display = '';
				}
				showPage();
				preLink();
				nextText();
				firstLink();
			}
			
			//隐藏所有数据
			function hideTable() {
				for (var i = 0; i < numberRowsInTable; i++) {
					theTable.rows[i].style.display = 'none';
				}
			}
			//当前页
			function showPage() {
				pageNum.innerHTML = page;
			}


			//总共页数
			function pageCount() {
				var count = 0;
				if (numberRowsInTable % pageSize != 0) 
				count = 1;
				return parseInt(numberRowsInTable / pageSize) + count;
			}

			//显示链接
			function preLink() {
				spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>";
			}

			function preText() {
				spanPre.innerHTML = "上一页";
			}
			//点击下一页
			function nextLink() {
				spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>";
			}

			function nextText() {
				spanNext.innerHTML = "下一页";
			}


			function firstLink() {
				spanFirst.innerHTML = "<a href='javascript:first();'>首页</a>";
			}

			function firstText() {
				spanFirst.innerHTML = "首页";
			}

			function lastLink() {
				spanLast.innerHTML = "<a href='javascript:last();'>尾页</a>";
			}

			function lastText() {
				spanLast.innerHTML = "尾页";
			}

			//隐藏表格
			function hide() {
				//根据每页显示条数,隐藏不需要得数据
				for (var i = pageSize; i < numberRowsInTable; i++) {
					theTable.rows[i].style.display = 'none';
				}
				//显示总页数
				totalPage.innerHTML = pageCount();
				//开始默认第一页
				pageNum.innerHTML = '1';
				//下一页
				nextLink();
				//尾页
				lastLink();
			}
			hide();