用js实现分页效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#data {color: red;border: solid;text-align: center;}
a{text-decoration: none;}
</style>
</head>
<body onLoad="Page(1,10);">
<table id="data" width="70%">
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
<tr><td>aaaaaaaaaaaa</td><td>1111111</td><td>吖吖</td><td>呵呵</td></tr>
</table>
<table width="60%" align="right">
<tr><td><div id="con" name="con"></div></td></tr>
</table>
<script>

//原理：所有数据已加载好，js通过遍历部分显示，实现分页效果

html代码

// 分页函数
// pno--页数
// size--每页显示记录数
// 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
function Page(pno,size){
　　var data = document.getElementById("data");
　　var num = data.rows.length;//表格所有行数(所有记录数)
　　console.log(num);
　　var totalPage = 0;//总页数
　　var pageSize = size;//每页显示行数
//总共分几页
　　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;//开始显示的行
　　var endRow = currentPage * pageSize;//结束显示的行
　　endRow = (endRow > num)? num : endRow; //三目运算符，
　　console.log(endRow);//控制台打印出结束的行
//遍历显示数据实现分页
　　for(var i=1;i<(num+1);i++){
　　　　var irow = data.rows[i-1];
　　　　if(i>=startRow && i<=endRow){
　　　　　　irow.style.display = "block";
　　　　}else{
　　　　　　irow.style.display = "none";
　　　　}
　　}
　　var pageEnd = document.getElementById("pageEnd");
　　var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
//判断页数>1时
　　if(currentPage>1){
　　　　tempStr += "<a href=\"#\" onClick=\"Page("+(1)+","+size+")\">首页</a>";
　　　　tempStr += "<a href=\"#\" onClick=\"Page("+(currentPage-1)+","+size+")\"><上一页</a>"
　　}else{
　　　　tempStr += "首页";
　　　　tempStr += "<上一页";
　　}
//判断页数<总页数时
　　if(currentPage<totalPage){
　　　　tempStr += "<a href=\"#\" onClick=\"Page("+(currentPage+1)+","+size+")\">下一页></a>";
　　　　tempStr += "<a href=\"#\" onClick=\"Page("+(totalPage)+","+size+")\">尾页</a>";
　　}else{
　　　　tempStr += "下一页>";
　　　　tempStr += "尾页";
　　}
　　document.getElementById("con").innerHTML = tempStr;
}
</script>
</body>
</html>

时间： 2024-08-05 22:23:31

用js实现分页效果的相关文章

原生JS实现分页效果1.0

不太完整,写的太急,等等加上完整注释,写起来还是有些难度的,写的有点水,后面再改进改进. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JS实现分页效果</title> <style> body{ margin:100px 200px; } #page{ margin:20px 0; } #

原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JS实现分页效果</title> <style> body{ margin:100px 200px; } #page{ m

JS实现分页效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

原生js显示分页效果

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>原生js分页</title> <style type="text/css"> #pageNav { display: inline-block; } #pageNav a { display: inline-block; wi

非常不错的一个JS分页效果代码

这里分享一个不错的js分页代码. 代码中cpage是页面计数,应为全局变量,可以随处调用它: totalpage是总页数. 与asp分页代码很类似,也是先取得记录总数,然后实现分页,基本的分页思路与原理还是相通的,感兴趣的朋友做个参考吧. 例子,js分页效果代码. <!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

5种风格的 jQuery 分页效果【附代码】

5种风格的 jQuery 分页效果 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>jQuery Pagination - jPaginate</title> <meta http-equi

jquery+NHibernate的分页效果

目录结构 先设计数据表结构 DROP SEQUENCE BDLLY_2V.SEQ_CUSTOMER; CREATE SEQUENCE BDLLY_2V.SEQ_CUSTOMER START WITH 6 MAXVALUE 999999999999999999999999999 MINVALUE 0 NOCYCLE NOCACHE NOORDER; DROP TABLE BDLLY_2V.CUSTOMER CASCADE CONSTRAINTS; CREATE TABLE Customer ( C

PageHelper+Bootstrap Paginator实现分页效果

最近需要做一个分页,找了挺多的前端分页效果,发现Bootstrap Paginator分页插件效果不错,而我页面也是用BootStrap做的响应式页面,就做了实现一个简单的分页效果. PageHelper地址:https://github.com/pagehelper/Mybatis-PageHelper Bootstrap Paginator:https://github.com/lyonlai/bootstrap-paginator 在SpringBoot+Mybatis做分页 1.首先添加

jquery自定义插件实现分页效果

这节介绍如何自定义jquery插件,实现分页效果,话不多说,先看看实现的效果: 分页插件 实现的代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta charset="utf-8"> <title>page t