求救！分页问题

  <div id="content">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
    <div id="feny">
    </div>
引用 jq 具体的功能要优化大概思路是这样的 var count = $("#content ul li").length;    $("#content ul li").hide();    $("#content ul li").eq(0).show();
    $("#content ul li").eq(1).show();
    $("#content ul li").eq(2).show();
    var fenyeHtml = "";
    for (var i = 1; i < count / 3 + 1; i++) {
        fenyeHtml =fenyeHtml+ "<span class = 'yema'>" + i + "</span>";
    }    $("#feny").html(fenyeHtml);     $('.yema').bind('click',function(){
         var yema = $(this).html();
         $("#content ul li").hide();
         $("#content ul li").eq((yema - 1) * 3).show();
         $("#content ul li").eq((yema - 1) * 3+1).show();
         $("#content ul li").eq((yema - 1) * 3+2).show();
       });

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>注册</title>
<script type="text/javascript" language="javascript" src="你的jQuery路径"></script>
<style  type="text/css">
#content{ font-size:12px;}
#content ul{ list-style:none;width:100px;}
#content li{ list-style:none;width:100px;float:left;}
#pagination{width:100%;float:left;}
#pagination ul{ list-style:none;width:100%;}
#pagination li{ list-style:none;width:100px;float:left;list-style:none;width:30px;height:20px; background:#bfbfbf;border:1px solid #bfbf;margin-left:5px; text-align:center; cursor:pointer;}
</style>
<script type="text/javascript">
$(function() {
       var Page = new Array();
       var pagecount=$('#content ul li').size();//获取总记录数
       var pagesize=3;//设置每页记录数
       pagecount=pagecount%pagesize>0?parseInt(pagecount/pagesize)+1:pagecount/pagesize;//获取总页数

       //设置页码
       var pagination="<ul>";
       for(i=0;i<pagecount;i++)
       {
            pagination+="<li>"+parseInt(i+1)+"</li>";
       }
       pagination+='</ul>';
       $(pagination).appendTo($('#pagination'));

       //给页码附加点击事件
       $('#pagination ul li').each(function(i){
           this.onclick=function(){gopage(parseInt(i+1))}
        });
       //显示指定页数据
       function gopage(n){
            $('#content ul li').hide();//隐藏所有数据
            //显示指定页码的数据
            for(i=(n-1)*pagesize;i<(n-1)*pagesize+pagesize;i++)
            {
                $('#content ul li').eq(i).show();
            }
       }
       //初始化时显示第1页
       gopage(1);
});</script>
</head>
<body>
<div id="content">
    <ul>
        <li>中华人民共和国1</li>
        <li>中华人民共和国2</li>
        <li>中华人民共和国3</li>
        <li>中华人民共和国4</li>
        <li>中华人民共和国5</li>
        <li>中华人民共和国6</li>
    </ul>
</div>
<div id="pagination"></div></body>
</html>

封装安全性和编程安全，可以先用java封装一个类
public class EmpDao {
public List<Emp> getEmpList(int page, int rowsPerPage) throws SQLException {
Connection con = ConnectionUtils.getConnection();// 打开数据库
PreparedStatement stmt = con.prepareStatement(getEmpList);
int start = (page - 1) * rowsPerPage + 1;
int end = start + rowsPerPage;
stmt.setInt(1, end);
stmt.setInt(2, start); ResultSet rs = stmt.executeQuery(); ArrayList empList = new ArrayList();
while (rs.next()) {
Emp emp = new Emp();
emp.setId(rs.getInt(1));
emp.setName(rs.getString(2));
emp.setSalary(rs.getDouble(3));
empList.add(emp);
}
return empList;
} /**
*
* @param rowsPerPage//一共有多少页
* @return
*/
public int getTotalPages(int rowsPerPage) throws SQLException {
Connection con = ConnectionUtils.getConnection();// 打开数据库
PreparedStatement stmt1 = con.prepareStatement(getcount);
ResultSet rs = stmt1.executeQuery();
rs.next();
int num = 0;
if (rs.getInt(1) % rowsPerPage == 0) {
num = rs.getInt(1) % rowsPerPage; } else {
num = rs.getInt(1) % rowsPerPage + 1;
} return num; }
}
再去修改一下jsp代码就行了
<%
int currentPage = 1;
String pageStr = request.getParameter("page");
if(pageStr!=null) {
currentPage = Integer.parseInt(pageStr);
}

EmpDao empDao = new EmpDao();
List<Emp> empList = empDao.getEmpList(currentPage,3);
int pager =empDao.getTotalPages(5);//总页数自己设
%>
<p>

<input type="button" class="button" value="Pre" <%if((currentPage-1)>0){%> onclick="location='emp_list.jsp?page=<%=currentPage-1%>'"<%}%>/>
Page: <%=currentPage%>
<input type="button" class="button" value="Next" <%if((currentPage+1)<pager){%> onclick="location='emp_list.jsp?page=<%=currentPage+1%>'"<%}%>/>
</p>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title> New Document </title>
  <meta http-equiv="Content-Type" content="text/html" charset="gbk">
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
</head>
<style type="text/css"/>
ul{list-style:none;}
ul li{display:none;}
span{font-size:12px;font-family:sans-serif;cursor:pointer;}
</style><script type="text/javascript"> var currPage=1; //当前页
var x=[]; //装载元素
var total=0;
var pageNo=0;  //计算多少总页数
var N=3;  //一页显示多少条数据
//得到下一个节点
function next(elem){
do{
elem=elem.nextSibling;
}while(elem&&elem.nodeType!=1);
return elem;
}

//插入总页数
function totalPage(total){
var totalData=document.getElementById("totalData");
totalData.innerHTML=total;
} //插入当前页
function numPage(currPage){
var curr=document.getElementById("currPage");
curr.innerHTML=currPage;
} //隐藏所有数据
function hide(){
for(var i=1;i<x.length;i++){
x[i].style.display="none";
}
}

//展示指定数据
function show(arr){
for(var i=1;i<arr.length;i++){
arr[i].style.display="block";
// alert(arr[i].innerHTML);
}
} //初始化（入口）
function sPage(){
var node=document.getElementsByTagName("ul")[0].firstChild;
for (var i = 0, node; node; i++, node = next(node)) {
x[i] = node;  //将元素装载到x[]中
}
// alert(x[1].innerHTML);

total=x.length-1; //计算多少条数据
// alert(x.length);
totalPage(total);
numPage(currPage);
if(total%3==0){
pageNo=total/3;
}else{
pageNo=(total/3)+1;
}
showPage();
} //显示页数
function showPage(){
var arr=[];
//alert(currPage);
for(i=N*(currPage-1)+1,j=1;i<=N*currPage,j<=N;i++,j++){
arr[j]=x[i];
}
// alert(arr[1].innerHTML);
show(arr);
} function firstPage(){
currPage=1;
numPage(currPage);
hide();
showPage();
} function lastPage(){
currPage=pageNo;
numPage(currPage);
hide();
showPage();
}

function backPage(){
currPage=currPage-1;
if(currPage<1){
currPage=1;
}
numPage(currPage);
hide();
showPage();
} function nextPage(){
currPage=currPage+1;
if(currPage>pageNo){
currPage=pageNo;
}
numPage(currPage);
hide();
showPage();
}
</script>
<body onload="sPage();">
  <div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
<div>
<span onclick="firstPage();">第一页</span>
<span onclick="backPage();">上一页</span>
<span>第<span id="currPage"></span>页</span>
<span onclick="nextPage();">下一页</span>
<span onclick="lastPage();">最后一页</span>
<span>总共有<span id="totalData"></span>条数据</span>
</div>
</div>
</body>

</html>
纯JavaScript 分页

调试易

求救！分页问题

解决方案 »