！分页有关问题-JavaSript-爱易网页

！分页有关问题

日期：2014-05-16　浏览次数：20497 次

求救！分页问题
<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

<!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>中华

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

！分页有关问题

相关资料更多>

推荐阅读更多>