jquer 实现分页
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.a{margin-left:auto;margin-right:auto;}
.a li{list-style:none;float:left;width:70px;height:70px;border:1px solid #999999;margin:5px;}
</style>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var pagesize=8;
var recordcount=19;
var pagecount;
pagecount=3;
//pagecount=ceil(recordcount/pagesize);
var currentpage=1;
$(function(){
$(".a li:gt(7)").hide();
$(".p").click(function(){
currentpage=$(this)[0].value;
start=((currentpage-1)*pagesize);
end = ((currentpage-1)*pagesize)+8-1;
//alert(start);
$(".a li").show();
$(".a li:lt("+start+")").hide();
$(".a li:gt("+end+")").hide();
//alert(currentpage);
});
});
</script>
</head>
<body>
<div style="width:400px;height:200px;border:1px solid #666666;">
<ul class="a">
<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>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
</ul>
</div>
<span value="1" class="p">1</span> <span value="2" class="p">2</span> <span value="3" class="p">3</span>
<div style="width:400px;height:200px;border:1px solid #666666;display:none;">
<ul class="a">
<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>
</ul>
</div>
<span value="1" class="p">1</span> <span value="2" class="p">2</span> <span value="3" class="p">3</span>
</body>
</html>
浙公网安备 33010602011771号