【菜鸟手打js】第三篇-带伪数据分页

最新推荐文章于 2020-12-01 10:25:05 发布

九流裱糊匠

最新推荐文章于 2020-12-01 10:25:05 发布

阅读量1k

点赞数

分类专栏： js 文章标签： javascript jquery 分页

本文链接：https://blog.csdn.net/z20905547/article/details/21243835

版权

js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

忙完工作，继续写。

在后台手动拼接了一个json数据，把数据列表页写出来。当然翻页请求获取到的都是这串数据，以后改成搜索数据库的就好了。

另外把js和css都独立出来了，看起来清晰点。

先贴效果：显示效果还得自己调css，数据列宽度也得手动调，这样生成的页面太死了，还得再去看看UI框架学学。

html代码：清理掉干净多了。

<!DOCTYPE html>
<html>
	<!--
	*Data:2014-02-25 
	*Author:Harry
	*Version:Bate	1.0	
	*Tested:IE6、IE8、IE9、IE10、Chrome28.0
	*PS:border-radius为Css3新增边框半径属性，IE6下无效
	-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>翻页</title>
<link rel="stylesheet" type="text/css" href="style1.3.css" />
<script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript" src="mypage.js"></script>
<script type="text/javascript">
		//参数说明：（当前页码，获取数据的接口，每页显示几行，翻页条显示多少个页码/除首尾）显示页码数太长会换行
		$(function(){
			//静态实现先这样
			$("#page1").changepage(2,"http://localhost:8095/ServerManageWeb/TestforPage",2,15);
			$("#page2").changepage(1,"http://localhost:8095/ServerManageWeb/TestforPage",2,10);
			})
		
			//-->
</script>
</head>
<body>
	<div id="page1"  class="turnpage">
		等待。。。。
	</div>
	<br/>
	<div id="page2"  class="turnpage">
		等等。。。。
	</div>
</body>

</html>

js代码：多加了一个jquery对象方法生成数据视图

//<!--匿名自执行函数，jquery做实参传入可作为局部变量
(function ($){
	//声明为jquery对象方法，便于区别实例化
	$.fn.showbar=function(cur,url,pagerow,pc,pagecount){//pagerow,每页显示多少条记录pc总页数，pagecount翻页栏页码数
 		elereturn="<ul class='pageul'>";
	 	//未找到更好的方法前先用parentNode....
	 	elereturn+=cur>1?"<li class='out'><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage("+(cur-1)+",\""+url+"\","+pagerow+","+pagecount+")'>上一页</a></li>":"<li class='out'>上一页</li>";

	 	var pageh=Math.floor(pagecount/2);//向下取整  
	 	if(pc<=pagecount){
		 	for (var i = 1; i < pc+1; i++) {
		 		elereturn+=(i==cur)?"<li class='cur'>"+i+"</li>":"<li><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage("+i+",\""+url+"\","+pagerow+","+pagecount+")'>"+i+"</a></li>";
		 	}	
	  }else{//利用js的&&、||执行特点减少分支语句，可读性会降低
	  	(cur<=pageh+1 && (function (){
	  		for (var j = 1; j < pagecount; j++) {
	  		 elereturn+=(j==cur)?"<li class='cur'>"+j+"</li>":"<li><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage("+j+",\""+url+"\","+pagerow+","+pagecount+")'>"+j+"</a></li>";
	  		}
	  		elereturn+="<li><span>....</span></li><li><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage("+pc+",\""+url+"\","+pagerow+","+pagecount+")'>"+pc+"</a></li>";
	  		return true; 	
	  	})())||(cur>= (pc-pageh) && (function (){
	  		elereturn+="<li><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage(1,\""+url+"\","+pagerow+","+pagecount+")'>1</a></li><li><span>....</span></li>";
	  		for (var j = (cur-pageh); j < pc+1; j++) {
	  		 elereturn+=(j==cur)?"<li class='cur'>"+j+"</li>":"<li><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage("+j+",\""+url+"\","+pagerow+","+pagecount+")'>"+j+"</a></li>";
	  		}
	  		return true; 	
	  	})())||( function (){
	  		elereturn+="<li><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage(1,\""+url+"\","+pagerow+","+pagecount+")'>1</a></li><li><span>....</span></li>";
	  		for (var j = cur-pageh+1; j < cur+pageh; j++) {
	  			elereturn+=(j==cur)?"<li class='cur'>"+j+"</li>":"<li><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage("+j+",\""+url+"\","+pagerow+","+pagecount+")'>"+j+"</a></li>";
	  	  }
	  	  elereturn+="<li><span>....</span></li><li><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage("+pc+",\""+url+"\","+pagerow+","+pagecount+")'>"+pc+"</a></li>";
	  	  return true; 
	  	}
	  	)();
	  }
	  elereturn+=cur<pc?"<li class='out'><a href='javascript:void(0)' οnclick='$(parentNode.parentNode.parentNode).changepage("+(cur+1)+",\""+url+"\","+pagerow+","+pagecount+")'>下一页</a></li>":"<li class='out'>下一页</li></ul>";
	  return elereturn;
	}
	$.fn.changepage=function (cur,urlStr,pagerow,pagecount){//pagerow每页显示多少条记录,pagecount页码数
	 	var pc=1;
	 	if(cur<1)cur=1;
	 	if(pagerow<1)pagerow=1;
	 	if(pagecount<1)pagecount=1;
		if(urlStr){
			var mybar=$(this);//要再ajax外面定义，否则this指向的是ajax的内置对象
			$.ajax({
				url:urlStr,
				data:{curpage:cur},
				dataType:"json",
				success:function(result){
					
					pc=Math.floor((parseInt(result.rowcount)+pagerow-1)/pagerow);
					if(cur>pc)cur=pc;
					var ss=mybar.showdata(result.data);
					ss+=mybar.showbar(cur,urlStr,pagerow,pc,pagecount);
//					var ss=mybar.showbar(cur,urlStr,pagerow,pc);
					mybar.empty();
	  				mybar.append(ss);
				}
				
			});	
		}
	}
	//显示记录集的
	$.fn.showdata=function(resultdata){
		var dataView="<div class='datadiv'><ul class='dataul'>";
		
		for(var i=0;i<resultdata.length;i++){//读行
			var row=resultdata[i];
			dataView+="<li>";
			for(var j=0;j<row.length;j++){//读列
				dataView+="<span class='dspan"+j+"'>"+row[j]+"</span>";
			}
			dataView+="</li>";
		}
		
		dataView+="</ul></div>";
	  return dataView;
	}
	
	
})($);

CSS代码：调效果调了好久，最后还是这么丑，死心了。

/*整个分页容器div的样式*/
.turnpage{
	font-size:14px;
	width:70%;
	text-align:center;
	position:relative;
}

/*数据框div*/
.datadiv{
	position:relative;
}
/*装翻页条的ul*/
.pageul{
	text-align:center;
	line-height:40px;
	position:relative;
	margin:5px 0px 5px 10px;
}
/*翻页条上li的样式*/
.pageul li{
	width:30px;
	height:25px;
	border:solid 1px #aaaaaa;
	border-radius:3px;
	text-align:center;
	vertical-align:middle;
	list-style-type:none;
	display:inline;
	float:left;
	line-height:25px;
	
}	
/*鼠标移到页码上时li的样式*/
.pageul li:hover{
	width:35px;
	height:30px;
	line-height:25px;
}
/*翻页条上的a标签*/
.pageul li a{
	width:100%;
	text-decoration:none;
	color:#11cccc;

}
/*鼠标移到页码上时a标签里的文字*/
.pageul li a:hover {
	color:red;
	font-size;16px;
}
/*当前页背景与其它页码分别*/
.cur{

	background-color:#e3e3e3;
}
/*上一页/下一页按钮的样式*/
.turnpage .out{
	width:60px;

}
/*鼠标移到上一页/下一页按钮时*/
.turnpage .out:hover{
	width:65px;

}
/*装数据的li*/
.dataul li{
	width:100%;
	border:solid 1px #e3e3e3;
	border-radius:5px;
	text-align:center;
	list-style-type:none;
	display:inline;
	float:left;
	height:30px;

}
/*装数据的span格式*/
.dataul li span{
	border-radius:3px;
	text-align:left;
	display:inline-block;
	width:30%;
	line-height:29px;
	border:solid 1px #aaaaaa;
	font-size:17px;
	
}
/*鼠标移到装数据的li时*/
.dataul li:hover{

	background-color:#aaaaaa;
}
/*鼠标移到装数据的li时*/
.dataul li:hover span{

	background-color:#777777;
}

/*鼠标经过装数据的span格式*/
.dataul li span:hover{
background-color:#e3e3e3;
	
}

servlet：就改了这个伪数据

strRespXml = "{\"rowcount\":\"50\",\"data\":[[\"aa\",\"bb\",\"cc\"],[\"11\",\"22\",\"33\"],[\"44\",\"55\",\"66\"]]}";

package com.forenet.web;

import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;



/**
 * Servlet implementation class TestforPage
 */
public class TestforPage extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public TestforPage() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		int cur=Integer.parseInt(request.getParameter("curpage"));
		String strRespXml = null;
		PrintWriter cliWriter = null;
		if(cur<1)cur=1;
		response.setContentType("text/html");
//		response.setHeader("pragma", "no-cache");
		request.setCharacterEncoding("utf-8");
		try {
			strRespXml = "{\"rowcount\":\"50\",\"data\":[[\"aa\",\"bb\",\"cc\"],[\"11\",\"22\",\"33\"],[\"44\",\"55\",\"66\"]]}";
			cliWriter = response.getWriter();
			cliWriter.print(strRespXml); //成功直接返回信息
			cliWriter.flush();
			cliWriter.close();
		} 
		catch (Exception e) {
			e.printStackTrace();
		}
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		this.doGet(request, response);
	}

}

九流裱糊匠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【菜鸟手打js】第三篇-带伪数据分页

忙完工作，继续写。在后台手动拼接了一个json数据，把数据列表页写出来。当然翻页请求获取到的都是这串数据，以后改成搜索数据库的就好了。另外把js和css都独立出来了，看起来清晰点。先贴效果：显示效果还得自己调css，数据列宽度也得手动调，这样生成的页面太死了，还得再去看看UI框架学学。html代码：清理掉干净多了。 <!-- *Data:2014-02-25
复制链接

扫一扫