这个页面演示了用javascript实现分页功能,包括(查询,新增,删除,分页,排序等)
<script src="Assert.js"></script>
<script src="String.js"></script>
<script src="ArrayList.js"></script>
<script src="Integer.js"></script>
<script src="HashMap.js"></script>
<script src="HashSet.js"></script>
<script src="SortedList.js"></script>
<script src="Collections.js"></script>
<style>
td{
font-size:12px;
}
th{
font-size:14px;
}
</style>
<body>
<table width="50%" align="center">
<tr>
<td>用户名称:<input type="text" id="search_name"></td>
<td><a href="#" onClick="searchUser()">查找用户</a></td>
</tr>
</table>
<div id="list_table" align="center">
</div>
<table width="50%" align="center">
<tr>
<td>用户ID:<input type="text" id="txt_id"></td>
<td>用户名称:<input type="text" id="txt_name"></td>
<td><a href="#" onClick="addUser()">添加用户</a></td>
</tr>
</table>
</body>
<script>
function User(id,name){
this.id=id;
this.name=name;
this.equals=equals;
function equals(obj){
return this.id==obj.id;
}
this.compareTo=compareTo;
function compareTo(obj){
return 1;
}
}
function AscID(){
this.compare=compare;
function compare(obj1,obj2){
if(obj1.id>obj2.id) return 1;
else if(obj1.id==obj2.id) return 0;
else return -1;
}
}
function DescID(){
this.compare=compare;
function compare(obj1,obj2){
if(obj1.id>obj2.id) return -1;
else if(obj1.id==obj2.id) return 0;
else return 1;
}
}
var table=document.getElementById("list_table");
var list=new SortedList();
var buffer=new ArrayList();
buffer.add(new User("100","Heery"));
buffer.add(new User("101","Marry"));
buffer.add(new User("102","JIM"));
buffer.add(new User("200","Bush"));
buffer.add(new User("201","Eey"));
buffer.add(new User("203","Boy"));
buffer.add(new User("300","Oush"));
buffer.add(new User("1111111","胡江涛"));
buffer.add(new User("2324424","温家宝"));
buffer.add(new User("24325324","刘淇"));
buffer.add(new User("245325353","吴树根"));
list.setComparator(new AscID());
list.addAll(buffer);
//var id_asc=true;
var pageSize=10;
var curPage=1;
function getTotalPage(){
return Math.ceil((list.size()/pageSize));
}
function getNavigation(){
var nav="<tr><td colspan=2>";
nav+="<a href='#' onClick='firstPage()'>首页</a> ";
nav+="<a href='#' onClick='prePage()'>上一页</a> ";
nav+="<a href='#' onClick='nextPage()'>下一页</a> ";
nav+="<a href='#' onClick='lastPage()'>末页</a> ";
nav+="总共:"+list.size();
nav+=" "
nav+="页次:"+curPage+"/"+getTotalPage();
nav+=" ";
nav+="每页显示:"+pageSize;
nav+=" ";
nav+="当前页数:"+curPage;
nav+="</td></tr>";
return nav;
}
function firstPage(){
curPage=1;
table.innerHTML=getInnerHTML(curPage,pageSize);
}
function nextPage(){
if(curPage==getTotalPage()) return;
table.innerHTML=getInnerHTML(++curPage,pageSize);
}
function prePage(){
if(curPage==1) return;
table.innerHTML=getInnerHTML(--curPage,pageSize);
}
function lastPage(){
curPage=getTotalPage();
table.innerHTML=getInnerHTML(curPage,pageSize);
}
function refresh(){
table.innerHTML=getInnerHTML(curPage,pageSize);
}
function addUser(){
var id=document.getElementById("txt_id").value;
var name=document.getElementById("txt_name").value;
//if(id_asc)
buffer.add(new User(id,name));
list.add(new User(id,name));
refresh();
}
function searchUser(){
var key=document.getElementById("search_name").value;
var com=list.getComparator();
list=new SortedList();
if(com!=null) list.setComparator(com);
for(var i=0;i<buffer.size();i++){
var u=buffer.get(i);
if(u.name.indexOf(key)!=-1) list.add(u);
}
refresh();
}
function delUser(id){
buffer.remove(new User(id,name));
list.remove(new User(id,name));
refresh();
}
function getInnerHTML(pg,size){
var s="<table width=50% align=center><tr><th id=\"user_id\" align=left width=40%>用户ID[<a href='#' onClick='descID()'>降序</a>]</th><th align=left>用户名称</th><th></td></tr>";
var first=(pg-1)*size;
for(var i=0;i<size;i++){
var index=first+i;
if(index>=list.size()) break;
var u=list.get(index);
s+="<tr><td>";
s+=u.id;
s+="</td><td>";
s+=u.name;
s+="</td><td>";
s+="<a href='#' onClick=\"delUser('";
s+=u.id;
s+="')\">删除</a>";
s+="</td></tr>";
}
s+=getNavigation();
s+="</table>";
return s;
}
//delay()
table.innerText="loading";
function oneStep(){
table.innerText="loading..";
}
function twoStep(){
table.innerText="loading....";
}
function threeStep(){
table.innerText="loading.........";
}
function fourStep(){
table.innerText="loading............OK!";
}
function descID(){
var oldList=list;
list=getSortedList(oldList,new DescID());
refresh();
var id=document.getElementById("user_id");
id.innerHTML="用户ID[<a href='#' onClick='ascID()'>升序</a>]";
}
function ascID(){
var oldList=list;
list=getSortedList(oldList,new AscID());
refresh();
}
setTimeout("oneStep()",500);
setTimeout("twoStep()",1000);
setTimeout("threeStep()",1500);
setTimeout("fourStep()",2000);
setTimeout("firstPage()",3000);
//firstPage();
</script>
