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

来源：互联网发布：阿里云网络类型编辑：程序博客网时间：2024/04/28 22:27

忙完工作，继续写。

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

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

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

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

<!DOCTYPE html><html><!--*Data:2014-02-25 *Author:Harry*Version:Bate1.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)' onclick='$(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)' onclick='$(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)' onclick='$(parentNode.parentNode.parentNode).changepage("+j+",\""+url+"\","+pagerow+","+pagecount+")'>"+j+"</a></li>";  }  elereturn+="<li><span>....</span></li><li><a href='javascript:void(0)' onclick='$(parentNode.parentNode.parentNode).changepage("+pc+",\""+url+"\","+pagerow+","+pagecount+")'>"+pc+"</a></li>";  return true;   })())||(cur>= (pc-pageh) && (function (){  elereturn+="<li><a href='javascript:void(0)' onclick='$(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)' onclick='$(parentNode.parentNode.parentNode).changepage("+j+",\""+url+"\","+pagerow+","+pagecount+")'>"+j+"</a></li>";  }  return true;   })())||( function (){  elereturn+="<li><a href='javascript:void(0)' onclick='$(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)' onclick='$(parentNode.parentNode.parentNode).changepage("+j+",\""+url+"\","+pagerow+","+pagecount+")'>"+j+"</a></li>";    }    elereturn+="<li><span>....</span></li><li><a href='javascript:void(0)' onclick='$(parentNode.parentNode.parentNode).changepage("+pc+",\""+url+"\","+pagerow+","+pagecount+")'>"+pc+"</a></li>";    return true;   }  )();  }  elereturn+=cur<pc?"<li class='out'><a href='javascript:void(0)' onclick='$(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