<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <table> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> </tr> </table> <table id="result"> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> </table> <div id="barcon"></div> <script> window.onload = function () { goPage(1) } function goPage(pno) { var itable = document.getElementById("result"); var num = itable.rows.length; //表格所有行数(所有记录数) console.log(num); var totalPage = 0; //总页数 var pageSize = 3; //每页显示行数 //总共分几页 if (num / pageSize > parseInt(num / pageSize)) { totalPage = parseInt(num / pageSize) + 1; } else { totalPage = parseInt(num / pageSize); } var currentPage = pno; //当前页数 var startRow = (currentPage - 1) * pageSize + 1; //开始显示的行 31 var endRow = currentPage * pageSize; //结束显示的行 40 endRow = (endRow > num) ? num : endRow; //40 //遍历显示数据实现分页 for (var i = 1; i < (num + 1); i++) { var irow = itable.rows[i - 1]; if (i >= startRow && i <= endRow) { irow.style.display = "table-row"; } else { irow.style.display = "none"; } } var pageEnd = document.getElementById("pageEnd"); var tempStr = "<span>共" + totalPage + "页</span>"; if (currentPage > 1) { tempStr += "<span class='btn spanbtn' href=\"#\" onClick=\"goPage(" + (1) + ")\">首页</span>"; tempStr += "<span class='btn spanbtn' href=\"#\" onClick=\"goPage(" + (currentPage - 1) + ")\">上一页</span>" } else { tempStr += "<span class='btn spanbtn'>首页</span>"; tempStr += "<span class='btn spanbtn'>上一页</span>"; } if (totalPage == 1) { tempStr += "<a onclick=\"goPage(" + currentPage + ")\"><span class='spanbtn nowpage pageicon'>" + currentPage + "</span></a>" } else if (totalPage == 2 && currentPage == 1) { tempStr += "<a onclick=\"goPage(" + currentPage + ")\"><span class='spanbtn pageicon nowpage'>" + currentPage + "</span></a>" + "<a onclick=\"goPage(" + (currentPage + 1) + ")\"><span class='spanbtn pageicon'>" + (currentPage + 1) + "</span></a>" } else if (totalPage == 2 && currentPage == 2) { tempStr += "<a onclick=\"goPage(" + (currentPage - 1) + ")\"><span class='spanbtn pageicon'>" + (currentPage - 1) + "</span></a>" + "<a onclick=\"goPage(" + currentPage + ")\"><span class='spanbtn nowpage pageicon'>" + currentPage + "</span></a>" } else if (totalPage >= 3 && currentPage == 1) { tempStr += "<a onclick=\"goPage(" + currentPage + ")\"><span class='spanbtn nowpage pageicon'>" + currentPage + "</span></a>" + "<a onclick=\"goPage(" + (currentPage + 1) + ")\"><span class='spanbtn pageicon'>" + (currentPage + 1) + "</span></a>" + "<a onclick=\"goPage(" + (currentPage + 2) + ")\"><span class='spanbtn pageicon'>" + ( currentPage + 2) + "</span></a>" } else if (totalPage >= 3 && currentPage == totalPage) { tempStr += "<a onclick=\"goPage(" + (currentPage - 2) + ")\"><span class='spanbtn pageicon'>" + (currentPage - 2) + "</span></a>" + "<a onclick=\"goPage(" + (currentPage - 1) + ")\"><span class='spanbtn pageicon'>" + (currentPage - 1) + "</span></a>" + "<a onclick=\"goPage(" + currentPage + ")\"><span class='spanbtn nowpage pageicon'>" + currentPage + "</span></a>" } else { tempStr += "<a onclick=\"goPage(" + (currentPage - 1) + ")\"><span class='spanbtn pageicon'>" + (currentPage - 1) + "</span></a>" + "<a onclick=\"goPage(" + currentPage + ")\"><span class='spanbtn nowpage pageicon'>" + currentPage + "</span></a>" + "<a onclick=\"goPage(" + (currentPage + 1) + ")\"><span class='spanbtn pageicon'>" + ( currentPage + 1) + "</span></a>" } if (currentPage < totalPage) { tempStr += "<span class='btn spanbtn' href=\"#\" onClick=\"goPage(" + (currentPage + 1) + ")\">下一页</span>"; tempStr += "<span class='btn spanbtn' href=\"#\" onClick=\"goPage(" + (totalPage) + ")\">尾页</span>"; } else { tempStr += "<span class='btn spanbtn'>下一页</span>"; tempStr += "<span class='btn spanbtn'>尾页</span>"; } document.getElementById("barcon").innerHTML = tempStr; } </script> </body> </html>
前端小demo-拖拽
猜你喜欢
转载自www.cnblogs.com/yuebanzhou/p/9209636.html
今日推荐
周排行