分页代码

最新推荐文章于 2024-07-01 11:34:43 发布
最新推荐文章于 2024-07-01 11:34:43 发布
阅读量156 收藏 1
点赞数
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42630877/article/details/82288099
版权 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script src="js/ajax.js"></script>
		<script src="js/config.js"></script>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

</head>
<body>
		<div id="qw" style="height:200px; width:100%;background-color:#444">
			<table id="table">
			
			
			
			</table>
		
		</div>
	<div class="waiceng" style="background-color:#666;height:30px;width:100%">
		<div  class="shouye" style="background-color:#999;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">首页</div>
		<div  id="shang" class="shangye" style="background-color:#888;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">上一页</div>
		<div  id="1" class="ye" style="background-color:#999;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">1</div>
		<div  id="2" class="ye" style="background-color:#999;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">								2</div>
		<div  id="3" class="ye" style="background-color:#888;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">3</div>
		<div  id="4" class="ye" style="background-color:#999;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">4</div>
		<div  id="5" class="ye" style="background-color:#888;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">5</div>
		<div  id="xia" class="xiaye" style="background-color:#999;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">下一页</div>
		<div class="weiye" style="background-color:#888;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">尾页</div>
		<div class="1" style="background-color:#999;margin-left:10px;width:7%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">
			<div style="width:30%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">第</div>
			<div style="background-color:#ppp;width:40%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">
				<input id="a" type="text" style="width:20px;height:24.5px; style="border:0px;">
			</div>
			<div style="width:30%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">页</div>
		</div>
		<div class="tiaozhuan" style="background-color:#999;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">跳转</div>
		<div class="1" style="background-color:#999;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">
			<div style="width:70%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">当前页：</div>
			<div class="dangqianye" style="width:30%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">1</div>
		</div>
		
		<div class="1" style="background-color:#999;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">
			<div style="width:70%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">总页数：</div>
			<div class="zongyeshu" style="width:30%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;"></div>
		</div>
</body>
<script>
$(function fenye(){
    var divclass = $(".ye");
    alert(divclass.length);
	var totalnum = 31;
	var pageSize = 2;
	var zongyeshu = totalnum/pageSize;
	if(totalnum%pageSize == 0){
	$(".zongyeshu").text(parseInt(totalnum/pageSize));
	}else{
		$(".zongyeshu").text(parseInt(totalnum/pageSize)+1);
	}
    for(var i = 0; i<divclass.length;i++){
    	divclass[0].onclick = function(){
    		if($("#1").text()==1){
    			
    			$(".dangqianye").text($("#1").text());
    			fen();
    		}else if($("#1").text()==2){
    			 $("#2").text($("#1").text());
    			 $("#1").text(parseInt($("#2").text())-1);
        		 $("#3").text(parseInt($("#2").text())+1);
        		 $("#4").text(parseInt($("#2").text())+2);
        		 $("#5").text(parseInt($("#2").text())+3);
        		 $(".dangqianye").text($("#2").text());
        		 fen();
    		}else{
    			 $("#3").text($(this).text());
        		 $("#1").text(parseInt($("#3").text())-2);
        		 $("#2").text(parseInt($("#3").text())-1);
        		 $("#4").text(parseInt($("#3").text())+1);
        		 $("#5").text(parseInt($("#3").text())+2);
        		 $(".dangqianye").text($("#3").text());//当前页
        		 fen();
    		}
    	}
    	divclass[1].onclick = function(){
    		if($("#2").text()==2){
    			
    			$(".dangqianye").text($("#2").text());//当前页
    		}else {
    			 $("#3").text($(this).text());
        		 $("#1").text(parseInt($("#3").text())-2);
        		 $("#2").text(parseInt($("#3").text())-1);
        		 $("#4").text(parseInt($("#3").text())+1);
        		 $("#5").text(parseInt($("#3").text())+2);
        		 $(".dangqianye").text($("#3").text());//当前页
    		}
    	}
    	divclass[2].onclick = function(){
    		 $("#3").text($(this).text());
    		 $("#1").text(parseInt($("#3").text())-2);
    		 $("#2").text(parseInt($("#3").text())-1);
    		 $("#4").text(parseInt($("#3").text())+1);
    		 $("#5").text(parseInt($("#3").text())+2);
    		 $(".dangqianye").text($("#3").text());//当前页
    		
    	}
    	divclass[3].onclick = function(){
    		if($(this).text()==zongyeshu-1){
    			$("#1").text(totalnum/pageSize-4);
    	 		$("#2").text(totalnum/pageSize-3);
    		    $("#3").text(totalnum/pageSize-2);
    	 		$("#4").text(totalnum/pageSize-1);
    	 		$("#5").text(totalnum/pageSize);
    	 		$(".dangqianye").text($(this).text());//当前页
    	 		
    		}else{
   		 $("#3").text($(this).text());
   		 $("#1").text(parseInt($("#3").text())-2);
   		 $("#2").text(parseInt($("#3").text())-1);
   		 $("#4").text(parseInt($("#3").text())+1);
   		 $("#5").text(parseInt($("#3").text())+2);
   		$(".dangqianye").text($("#3").text());//当前页
    		}
   	}
    	divclass[4].onclick = function(){
    		if($(this).text()==zongyeshu||$(this).text()==zongyeshu-1){
    			$("#1").text(totalnum/pageSize-4);
    	 		$("#2").text(totalnum/pageSize-3);
    		    $("#3").text(totalnum/pageSize-2);
    	 		$("#4").text(totalnum/pageSize-1);
    	 		$("#5").text(totalnum/pageSize);
    	 		$(".dangqianye").text($(this).text());//当前页
    		}else{
   		 $("#3").text($(this).text());
   		 $("#1").text(parseInt($("#3").text())-2);
   		 $("#2").text(parseInt($("#3").text())-1);
   		 $("#4").text(parseInt($("#3").text())+1);
   		 $("#5").text(parseInt($("#3").text())+2);
   		$(".dangqianye").text($("#3").text());//当前页
    		}
   	}
    }
		

    $(".shangye").click(function(){
    	if($("#5").text()==5){
    		$("#3").text(parseInt($("#3").text()));
        	$("#1").text(parseInt($("#1").text()));
      		$("#2").text(parseInt($("#2").text()));
      		$("#4").text(parseInt($("#4").text()));
      		$("#5").text(parseInt($("#5").text()));
      		if($(".dangqianye").text()==1){
      			alert("到头了");
      		}else{
      		$(".dangqianye").text(parseInt($(".dangqianye").text())-1);//当前页
      		}
    	}else{
	    	$("#3").text(parseInt($("#3").text())-1);
	    	$("#1").text(parseInt($("#1").text())-1);
	  		$("#2").text(parseInt($("#2").text())-1);
	  		$("#4").text(parseInt($("#4").text())-1);
	  		$("#5").text(parseInt($("#5").text())-1);
	  		$(".dangqianye").text($("#3").text());//当前页
    	 }
    	});
   $(".xiaye").click(function(){
		var bb = $(".dangqianye").text();
	   if(bb<3){
   		    $("#3").text(parseInt($("#3").text()));
         	$("#1").text(parseInt($("#1").text()));
     		$("#2").text(parseInt($("#2").text()));
     		$("#4").text(parseInt($("#4").text()));
     		$("#5").text(parseInt($("#5").text()));
     		$(".dangqianye").text(parseInt($(".dangqianye").text())+1);//当前页
   	}else if(bb<$(".zongyeshu").text()-2){
    	$("#3").text(parseInt($("#3").text())+1);
    	$("#1").text(parseInt($("#1").text())+1);
  		$("#2").text(parseInt($("#2").text())+1);
  		$("#4").text(parseInt($("#4").text())+1);
  		$("#5").text(parseInt($("#5").text())+1	);
  		if($(".dangqianye").text()==$(".zongyeshu").text()){
 			alert("到头了");
 		}else{
 			$(".dangqianye").text($("#3").text());//当前页
 		}
   	}else{
   		$("#1").text($(".zongyeshu").text()-4);
    	$("#2").text($(".zongyeshu").text()-3);
  		$("#3").text($(".zongyeshu").text()-2);
  		$("#4").text($(".zongyeshu").text()-1);
  		$("#5").text($(".zongyeshu").text());
  		if($(".dangqianye").text()==$(".zongyeshu").text()){
 			alert("到头了");
 		}else{
 			$(".dangqianye").text(parseInt($(".dangqianye").text())+1);//当前页
 		}
   	}
    	});
   $(".shouye").click(function(){
   		$("#1").text("1");
 		$("#2").text("2");
	    $("#3").text("3");
 		$("#4").text("4");
 		$("#5").text("5");
 		$(".dangqianye").text($("#1").text());//当前页
   });
   $(".tiaozhuan").click(function(){
	  if(parseInt($("#a").val())>$(".zongyeshu").text()){
		  alert("最多"+$(".zongyeshu").text()+"页");
	  }else if(parseInt($("#a").val())==($(".zongyeshu").text()-2)||parseInt($("#a").val())==($(".zongyeshu").text()-1)||parseInt($("#a").val())==$(".zongyeshu").text()){
		  $("#1").text($(".zongyeshu").text()-4);
	 		$("#2").text($(".zongyeshu").text()-3);
		    $("#3").text($(".zongyeshu").text()-2);
	 		$("#4").text($(".zongyeshu").text()-1);
	 		$("#5").text($(".zongyeshu").text());
	 		$(".dangqianye").text(parseInt($("#a").val()));
	  }else{
	   if(parseInt($("#a").val())>=0){
		   if(parseInt($("#a").val())==1||parseInt($("#a").val())==2){
		   		$("#1").text("1");
		 		$("#2").text("2");
			    $("#3").text("3");
		 		$("#4").text("4");
		 		$("#5").text("5");
		 		$(".dangqianye").text(parseInt($("#a").val()));
		   }else{
	    $("#3").text(parseInt($("#a").val()));
  		$("#1").text(parseInt($("#a").val())-2);
		$("#2").text(parseInt($("#a").val())-1);
		$("#4").text(parseInt($("#a").val())+1);
		$("#5").text(parseInt($("#a").val())+2);
		$(".dangqianye").text(parseInt($("#a").val()));
	   }
	   }else{
		   alert("不符合跳转规则");
	   }
	  } 
   });
		$(".weiye").click(function(){
			  $("#1").text($(".zongyeshu").text()-4);
		 		$("#2").text($(".zongyeshu").text()-3);
			    $("#3").text($(".zongyeshu").text()-2);
		 		$("#4").text($(".zongyeshu").text()-1);
		 		$("#5").text($(".zongyeshu").text()); 
		 		$(".dangqianye").text($(".zongyeshu").text());//当前页
			
		});
})


		function fen(){
		
		
			//var url = baseurl + "fenye";
			var url = "http://localhost:8080/Test/fenye"
			var base = AJAX.ajaxpost(url,"");
			  alert(11);
			  alert(typeof(base));
			if(JSON.parse(base).code =="200"){
				alert(12);
				alert(JSON.parse(base).data[1][1]);
				//alert(base.data[1][1]);
				for(var j = ($(".dangqianye").text()-1)*3; $(".dangqianye").text()<$(".dangqianye").text()*3; j++){
					alert("===");
					var trStr = '<tr><td>'+JSON.parse(base).data[j][0]+'</td><td>'+JSON.parse(base).data[0][1]+'</td><td>'+JSON.parse(base).data[j][2]+'</td><td>'+JSON.parse(base).data[0][3]+'</td></tr>';
					$("#table").append(trStr);
					
				}
				
			}
		
		}
	

</script>
</html>

 

温文尔雅小禽兽
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
分页实现代码
04-25
对于大部分初学的程序员，对于分页可能是个需要考虑的问题，这里提供一些分页的代码和实现的效果功能，需要的朋友学习。
纯JS前端实现分页代码
11-25
在提供的代码片段中，这些元素以`<ul>`列表的形式呈现，每个`<li>`元素代表一个分页按钮。例如，“首页”和“尾页”按钮是固定的，而“上一页”和“下一页”按钮根据当前页的状态（是否为第一页或最后一页）动态设置...
分页的代码
ws826354136的博客
10-08 266
###page public class PageBean&lt;T&gt; { private int totalCount ; //数据总条数据 private int totalPage ; //总页数 private int currPage ; //当前页 private int rows ; //每页显示数据条数 private List&lt;T&gt; list...
用JavaScript实现分页功能
最新发布
qq_52530691的博客
07-01 1638
用JavaScript实现分页功能
DISCUZ 分页代码
12-17
复制代码 代码如下:<?php /* [Discuz!] (C)2001-2006 Comsenz Inc. This is NOT a freeware, use is subject to license terms $RCSfile: global.func.php,v $ $Revision: 1.83.2.7 $ $...
css,html漂亮的分页代码
02-03
本主题将深入探讨如何使用HTML和CSS来实现美观且实用的分页代码。 首先，HTML（HyperText Markup Language）是网页内容的基础结构语言，它定义了页面的元素和布局。在创建分页时，我们通常会使用`<ul>`和`<li>`标签...
简单的分页代码js实现
11-25
简单的分页js代码: 1、效果描述：  不用分页即可显示的jQuery插件  jQuery分页插件——jQuery.page.js用法很简单，效果很棒  2、调用方法：  $(".tcdPageCode").createPage({ pageCount:10, current:1, ...
jsp 分页代码大全
09-02
自己收集的jsp分页代码。对于北大青鸟Y2的学员可能有用吧。自己也在做这个项目。这里有增、删、该、查加分页。有上一页、下一页、首页、尾页、第几页、还有带数字和点的分页。可以说是非常好的分页代码。想要的朋友自己处下载 <%@ page contentType="text/html; charset=GB2312" language="java" import="java.sql.*" errorPage="" %> <%@ page import="java.io.*" %> <%@ page import="java.util.*" %> <% java.sql.Connection sqlCon; //数据库连接对象 java.sql.Statement sqlStmt; //SQL语句对象 ResultSet sqlRst=null; //java.sql.ResultSet sqlRst; //结果集对象 java.lang.String strCon; //数据库连接字符串 java.lang.String strSQL; //SQL语句 int intPageSize; //一页显示的记录数 int intRowCount; //记录总数 int intPageCount; //总页数 int intPage; //待显示页码 java.lang.String strPage; int i; //设置一页显示的记录数 intPageSize = 2; //取得待显示页码 strPage = request.getParameter("page"); if(strPage==null){ //表明在QueryString中没有page这一个参数，此时显示第一页数据 intPage = 1; } else{ //将字符串转换成整型 intPage = java.lang.Integer.parseInt(strPage); if(intPage<1) intPage = 1; } %><% String DBUser="sa"; String DBPassword="88029712"; //String DBServer="127.0.0.1"zjprice; String DBUrl="jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=pubs"; //创建语句对象 //Class.forName("org.gjt.mm.mysql.Driver").newInstance(); Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver").newInstance(); sqlCon=java.sql.DriverManager.getConnection(DBUrl,DBUser,DBPassword); sqlStmt=sqlCon.createStatement(java.sql.ResultSet.TYPE_SCROLL_INSENSITIVE,java.sql.ResultSet.CONCUR_READ_ONLY); //执行SQL语句并获取结果集 String sql=null; String search=""; String ToPage=request.getParameter("ToPage"); if(request.getParameter("search")!=null &&!request.getParameter("search").equals("")) {search=new String(request.getParameter("search").trim().getBytes("8859_1")); } sql="select top 50 au_id,au_lname from authors "; /*sql="select*from ta,tb where id like'%"+search+"%'"; sql=sql+"or title like'%"+search+"%'"; sql=sql+"or time like'%"+search+"%'"; sql=sql+"or con like'%"+search+"%'"; sql=sql+"order by id";*/ sqlRst=sqlStmt.executeQuery(sql); //获取记录总数 sqlRst.last(); intRowCount = sqlRst.getRow(); //记算总页数 intPageCount = (intRowCount+intPageSize-1) / intPageSize; //调整待显示的页码 if(intPage>intPageCount) intPage = intPageCount; %> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>test</title> </head> <body> <table border="1" cellspacing="0" cellpadding="0"> <tr> <th>标题id</th> <th>内容表</th> </tr> <% if(intPageCount>0) { //将记录指针定位到待显示页的第一条记录上 sqlRst.absolute((intPage-1) * intPageSize + 1); //显示数据 i = 0; while(i<intPageSize && !sqlRst.isAfterLast()){ %> <tr> <td> <%=sqlRst.getString(1)%> </td> <td> <%=sqlRst.getString(2)%> </td> </tr> <% sqlRst.next(); i++; } } %> <tr><td colspan="8">共有<font color=red><%= intRowCount %></font>条记录 当前<font color=red><%=intPage%>/<%=intPageCount%></font>页  <% if(intPageCount > 1){ %> <% if(intPage !=0){%> <a href="mysqlpage.jsp">首页</a> <%}if(intPage != 1){%><a href="mysqlpage.jsp?page=<%= intPage - 1 %>">上一页</a> <%}if(intPage<intPageCount){%><a href="mysqlpage.jsp?page=<%=intPage+1%>">下一页</a><%}%> <a href="mysqlpage.jsp?page=<%= intPageCount %>">尾页</a> <% } %>跳转到 <select name="page" onChange="javascript:this.form.submit();"> <% for(i=1;i<=intPageCount;i++){%> <option value="<%= i %>" <% if(intPage == i){%>selected<% } %>><%= i %></option> <% } %> </select>页 <%int m,n,p; %> <%if (intPage>1){ if(intPage-2>0){ m=intPage-2;} else { m=1;} if(intPage+2<intPageCount){ n=intPage+2;} else{ n=intPageCount; }%> 转到页码: [ <% for(p=m;p<=n;p++) { if (intPage==p){ %> <font color="black"><%=p %></font> <% } else{%> <a href=?page=<%=p %>><font color=red>[<%=p %>]</font></a> <% } }%>]<%} %> </td></tr> </table> </body> </html> <% //关闭结果集 sqlRst.close(); //关闭SQL语句对象 sqlStmt.close(); //关闭数据库 sqlCon.close(); %>
分页实现相关代码
11-13
http://blog.csdn.net/tjpu_lin/article/details/41050475 和博客文章相对的相关资源，下载时请看仔细
原生JS设置页码页数分页代码.zip
07-05
原生JS设置页码页数分页代码是一款支持首页尾页上一页下一页总共多少条数据显示分页代码。
最经典的分页代码
05-26
经过多年优化，已经无数项目验证过的分页代码，非常经典
写一个分页代码
qq_40974400的博客
07-29 829
运行结果如下： 具体实现： 首先定义一个方法名为genPagination，类型String，其次里面设置5个参数，分别为：目标地址，总记录数，当前页，每页大小，自定义的参数(可无) 然后计算总共有几页：公式总页数=总记录数%每页大小。判断公式余数是否为0，若不为0则+1。 其次，再判断总页数是否为0，若等于0，则返回一条信息...
简单的分页代码
雪后残阳
11-02 956
public interface   IPage {  DataTable  FirstPage();  DataTable  NextPage();  DataTable  Page(int index); } ///  /// OrderDetailEntity 的摘要说明。 ///  public class OrdersEntity:IPage {     private  Hashtab
SQL存储过程实现的分页代码及多样化样式示例
"这篇资源提供了一种使用存储过程实现分页功能的方法，并且结合了多样式的分页代码，适用于Web应用程序。作者为qubernet，提供了分页控件类的详细代码实现，包括设置样式、获取当前页和总页数等关键功能。" 在Web...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值