需要一个分页，花了一个钟写了一个，刚学js，不是很完美 

 1 <script src="js/jquery.min.js" ></script>
 2     <script type="text/javascript">
 3     //全局变量
 4     var page=0;
 5     var arrayTxt=new Array();
 6     function array(){
 7         for(var j=0;j<200;j++){
 8         arrayTxt[j]='<td>这是分页测试'+j+'</td>';
 9         }
10     }
11     //加载第一页数据和按钮
12     $(document).ready(function(){
13         var strTab;
14         var strBtn;
15         var strPage;
16         var length;
17         var xinwei=0;
18         array();
19         length=arrayTxt.length;
20         //每页十条
21         for(var a=0;a<10;a++)
22         {
23             strTab+='<tr><td>'+a+'</td> '+arrayTxt[a]+'</tr>';
24         }
25         $("#tab").append(strTab);
26         strPage='<input type="button" class="btn" value="上一页" onclick="btnUpPage()" /><select id="btnPage" onchange="btnPage()">';
27         for(var i=0;i<length/8;i++){
28             xinwei++;
29             strPage+='<option value="'+i+'"">第'+xinwei+'页</option>'
30             //strBtn+='<input type="button" class="btn" value="'+xinwei+'" onclick="btnPage('+i+')" />';
31             }
32         strPage+='</select><input type="button" class="btn" value="下一页" onclick="btnDownPage('+length/8+')" />'
33         $("#btnList").append(strPage);
34     });
35 
36     //下拉框值变化时加载数据
37     function btnPage(){
38         var newpage=$("#btnPage").val();
39         var pageList=8*newpage;
40         var strTab='<tr><th>序号</th><th>测试列表</th></tr>';
41         page=parseInt(newpage);
42         for(var a=0;a<10;a++)
43         {
44             strTab+='<tr><td>'+pageList+'</td> '+arrayTxt[pageList]+'</tr>';
45             pageList++;
46         }
47         $("#tab").html(strTab);
48     }
49     //上一页和下一页
50     function btnUpPage(){
51         if(page>0)
52         {
53         var newpage=page-1;
54         var pageList=8*newpage;
55         var strTab='<tr><th>序号</th><th>测试列表</th></tr>';
56         page=newpage;
57         $("#btnPage").val(page);
58         for(var a=0;a<10;a++)
59         {
60             strTab+='<tr><td>'+pageList+'</td> '+arrayTxt[pageList]+'</tr>';
61             pageList++;
62         }
63         $("#tab").html(strTab);
64 
65         }
66     }
67     function btnDownPage(length){
68         if(page<length-1)
69         {
70         var newpage=page+1;
71         var pageList=8*newpage;
72         var strTab='<tr><th>序号</th><th>测试列表</th></tr>';
73         page=newpage;
74         $("#btnPage").val(page);
75         for(var a=0;a<10;a++)
76         {
77             strTab+='<tr><td>'+pageList+'</td> '+arrayTxt[pageList]+'</tr>';
78             pageList++;
79         }
80         $("#tab").html(strTab);
81         }
82     }
83     </script>

以上是js代码，刚学了JQ，因为需要用到分页功能，所以就顺手写了一个，比较简单，用到的API不多，新手应该可以看懂

这几天再优化一下，有些方法可以合并，有兴趣的朋友可以看一下

<div class="content">
	<div class="list">
		<table id="tab">
			<tr>
			<th>序号</th>
			<th>测试列表</th>
			</tr>

		</table>
	</div>
	<div class="btn-box" id="btnList">
	<option></option>
	</div>
</div>

这是html代码　

　

posted @ 2015-05-08 16:51  godz  阅读(208)  评论(0)    收藏  举报