！分页有关问题

求救！分页问题
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>

用js如何分页？每页显示3条，求js代码

[解决办法]
<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();
});

[解决办法]

HTML code

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;&lt;title&gt;注册&lt;/title&gt;&lt;script type="text/javascript" language="javascript" src="你的jQuery路径"&gt;&lt;/script&gt;&lt;style  type="text/css"&gt;#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;}&lt;/style&gt;&lt;script type="text/javascript"&gt;$(function() {       var Page = new Array();       var pagecount=$('#content ul li').size();//获取总记录数       var pagesize=3;//设置每页记录数       pagecount=pagecount%pagesize&gt;0?parseInt(pagecount/pagesize)+1:pagecount/pagesize;//获取总页数              //设置页码       var pagination="&lt;ul&gt;";       for(i=0;i&lt;pagecount;i++)       {            pagination+="&lt;li&gt;"+parseInt(i+1)+"&lt;/li&gt;";          }       pagination+='&lt;/ul&gt;';       $(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&lt;(n-1)*pagesize+pagesize;i++)            {                $('#content ul li').eq(i).show();            }       }       //初始化时显示第1页       gopage(1);});&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;div id="content"&gt;    &lt;ul&gt;        &lt;li&gt;中华人民共和国1&lt;/li&gt;        &lt;li&gt;中华人民共和国2&lt;/li&gt;        &lt;li&gt;中华人民共和国3&lt;/li&gt;        &lt;li&gt;中华人民共和国4&lt;/li&gt;        &lt;li&gt;中华人民共和国5&lt;/li&gt;        &lt;li&gt;中华人民共和国6&lt;/li&gt;    &lt;/ul&gt;&lt;/div&gt;&lt;div id="pagination"&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt; 
 
[解决办法]
封装安全性和编程安全，可以先用java封装一个类
public class EmpDao {
public List&lt;Emp&gt; 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代码就行了
&lt;%
int currentPage = 1;
String pageStr = request.getParameter("page");
if(pageStr!=null) {
currentPage = Integer.parseInt(pageStr);
}

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

&lt;input type="button" class="button" value="Pre" &lt;%if((currentPage-1)&gt;0){%&gt; onclick="location='emp_list.jsp?page=&lt;%=currentPage-1%&gt;'"&lt;%}%&gt;/&gt;
Page: &lt;%=currentPage%&gt;
&lt;input type="button" class="button" value="Next" &lt;%if((currentPage+1)&lt;pager){%&gt; onclick="location='emp_list.jsp?page=&lt;%=currentPage+1%&gt;'"&lt;%}%&gt;/&gt;
&lt;/p&gt;
[解决办法]
HTML code&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt; &lt;head&gt;  &lt;title&gt; New Document &lt;/title&gt;  &lt;meta http-equiv="Content-Type" content="text/html" charset="gbk"&gt;  &lt;meta name="Generator" content="EditPlus"&gt;  &lt;meta name="Author" content=""&gt;  &lt;meta name="Keywords" content=""&gt;  &lt;meta name="Description" content=""&gt; &lt;/head&gt;&lt;style type="text/css"/&gt;    ul{list-style:none;}    ul li{display:none;}    span{font-size:12px;font-family:sans-serif;cursor:pointer;}&lt;/style&gt;&lt;script type="text/javascript"&gt;    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&lt;x.length;i++){            x[i].style.display="none";        }    }        //展示指定数据    function show(arr){        for(var i=1;i&lt;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&lt;=N*currPage,j&lt;=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&lt;1){            currPage=1;        }        numPage(currPage);        hide();        showPage();    }    function nextPage(){        currPage=currPage+1;        if(currPage&gt;pageNo){        currPage=pageNo;        }        numPage(currPage);        hide();        showPage();    }&lt;/script&gt; &lt;body onload="sPage();"&gt;  &lt;div&gt;&lt;ul&gt;&lt;li&gt;1&lt;/li&gt;&lt;li&gt;2&lt;/li&gt;&lt;li&gt;3&lt;/li&gt;&lt;li&gt;4&lt;/li&gt;&lt;li&gt;5&lt;/li&gt;&lt;li&gt;6&lt;/li&gt;&lt;li&gt;7&lt;/li&gt;&lt;li&gt;8&lt;/li&gt;&lt;li&gt;9&lt;/li&gt;&lt;li&gt;10&lt;/li&gt;&lt;li&gt;11&lt;/li&gt;&lt;li&gt;12&lt;/li&gt;&lt;/ul&gt;&lt;div&gt;    &lt;span onclick="firstPage();"&gt;第一页&lt;/span&gt;    &lt;span onclick="backPage();"&gt;上一页&lt;/span&gt;    &lt;span&gt;第&lt;span id="currPage"&gt;&lt;/span&gt;页&lt;/span&gt;    &lt;span onclick="nextPage();"&gt;下一页&lt;/span&gt;    &lt;span onclick="lastPage();"&gt;最后一页&lt;/span&gt;    &lt;span&gt;总共有&lt;span id="totalData"&gt;&lt;/span&gt;条数据&lt;/span&gt;&lt;/div&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;

！分页有关问题

热点推荐