console
function Paging(index) {
var RankInfo = document.getElementById('record');
var totalPage = RankInfo.rows.length;
var pageSize = 5;
var pageNumber = Math.ceil(totalPage / pageSize);
var currentPage = index;
var start_row = (currentPage - 1) * pageSize;
var end_row = currentPage * pageSize;
end_row = (end_row > totalPage) ? totalPage : end_row;
for (var i = 0; i < totalPage; i++) {
var irow = RankInfo.rows[i];
if (i >= start_row && i < end_row) {
irow.style.display = 'table-row';
} else {
irow.style.display = 'none';
}
}
var pageHTML = '';
pageHTML += "<a class='p_first' href=\"javascript:Paging(1)\" title=\"首页\">首页</a>";
var up = parseInt(currentPage) - 1;
if (up < 1) {
up = 1;
}
pageHTML += "<a class='p_prev' href=\"javascript:Paging(" + up + ")\" title=\"上一页\">上一页</a>";
pageHTML += "<span>" + currentPage + "/" + pageNumber + "</span>";
var next = parseInt(currentPage) + 1;
if (next > pageNumber) {
next = pageNumber;
}
pageHTML += "<a class='p_next js_page' href=\"javascript:Paging(" + next + ")\" title=\"下一页\">下一页</a>";
pageHTML += "<a class='p_last js_page' href=\"javascript:Paging(" + pageNumber + ")\" title=\"尾页\">尾页</a>";
if (totalPage == 0) {
$("#page").html('');
} else {
$("#page").html(pageHTML);
}
}
Paging(1)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>js分页</title>
</head>
<body>
<table border="1" cellspacing='0'>
<thead>
<tr>
<th>数目</th>
<th>姓名</th>
<th>班级</th>
<th>备注</th>
</tr>
</thead>
<tbody id='record'>
<tr>
<th>1</th>
<th>姓名1</th>
<th>1</th>
<th>备注</th>
</tr>
<tr>
<th>2</th>
<th>姓名2</th>
<th>1</th>
<th>备注</th>
</tr>
<tr>
<th>3</th>
<th>姓名3</th>
<th>2</th>
<th>备注</th>
</tr>
<tr>
<th>4</th>
<th>姓名4</th>
<th>3</th>
<th>备注</th>
</tr>
<tr>
<th>5</th>
<th>姓名5</th>
<th>5</th>
<th>备注</th>
</tr>
<tr>
<th>6</th>
<th>姓名6</th>
<th>4</th>
<th>备注</th>
</tr>
<tr>
<th>7</th>
<th>姓名7</th>
<th>6</th>
<th>备注</th>
</tr>
<tr>
<th>7</th>
<th>姓名7</th>
<th>6</th>
<th>备注</th>
</tr>
<tr>
<th>7</th>
<th>姓名7</th>
<th>6</th>
<th>备注</th>
</tr>
<tr>
<th>7</th>
<th>姓名7</th>
<th>6</th>
<th>备注</th>
</tr>
<tr>
<th>7</th>
<th>姓名7</th>
<th>6</th>
<th>备注</th>
</tr>
<tr>
<th>7</th>
<th>姓名7</th>
<th>6</th>
<th>备注</th>
</tr>
<tr>
<th>7</th>
<th>姓名7</th>
<th>6</th>
<th>备注</th>
</tr>
</tbody>
<tfoot id='page'></tfoot>
</table>
<span style="font-size:14px;">
<script>
Paging(3)
</script>
</span>
</body>
</html>