一个简单分页的实例

１.由前端页面发送Ajax请求至服务器端．
　　　

代码

　　　　　　　　　function QueryList(no){
            var url="getXML.do";
            var pars="pageNo="+no;
            var ajax=new Ajax.Request(url,{
            method:'get',
            parameters:pars,
            onComplete:showResponse
            });

 

　　　

代码

   //回调
   function showResponse(request){

var parser=new MyXmlParser();
parser.load(request);
var dataList=parser.itemList;
        var pageList=parser.pageList;
        showTable(dataList,pageList);

　　　这里用到的是prototype-1.4.0.js中的Ajax对象．
　　２.服务器端处理程序到数据库查询数据并生成xml档返回．
　　

代码

　　　　StringBuffer resultXML = new StringBuffer();
        int pageNo = new Integer(request.getParameter("pageNo")).intValue();

        try {
            resultXML.append("<?xml version='1.0' encoding='gb2312'?>");
            resultXML.append("<ajax-response>/n");
            resultXML.append("<root>/n");

            Pagination page = new Pagination(request, 100);
            List list = this.getTestList(page.getStart(), page.getPageSize());
            for (int i = 0; i < list.size(); i++) {
                TestBean bean = (TestBean) list.get(i);
                resultXML.append("<data>/n");
                resultXML
                        .append("/t<id>" + bean.getId().toString() + "</id>/n");
                resultXML.append("/t<name>" + bean.getName() + "</name>/n");
                resultXML.append("/t<sex>" + bean.getSex() + "</sex>/n");
                resultXML.append("/t<age>" + bean.getAge().toString()
                        + "</age>/n");
                resultXML.append("</data>/n");
            }

            resultXML.append("<pagination>/n");
            resultXML.append("/t<total>" + page.getTotal() + "</total>/n");
            resultXML.append("/t<start>" + page.getStart() + "</start>/n");
            resultXML.append("/t<end>" + page.getEnd() + "</end>/n");
            resultXML.append("/t<pageno>" + page.getPageNo() + "</pageno>/n");
            resultXML.append("</pagination>/n");

            resultXML.append("</root>/n");
            resultXML.append("</ajax-response>");
        } catch (Exception e) {
            e.printStackTrace();
        }
        writeResponse(request, response, resultXML.toString());

 

３.在Ajax响应方法中对xml解析并生成表格显示到页面．

代码

　　//显示数据
         function showTable(dataList,pageList){
                    try{
                            //清单部分
                            var bodyPanel=$("bodyPanel");
                            var tab = document.createElement("table");
                            tab.className="datagrid";
                            tab.id="myTable";

                            bodyPanel.replaceChild(tab,bodyPanel.firstChild)

                            var headerrow = tab.insertRow(0);

                            createNode(headerrow,'th','header','id');
                            createNode(headerrow,'th','header','姓名');
                            createNode(headerrow,'th','header','职业');
                            createNode(headerrow,'th','header','工资');

                            for(var i=0;i<dataList.length;i++){
                                var row=tab.insertRow(i+1);
                                row.className="rows";
                                for(var j=0;j<4;j++){
                                    var col=row.insertCell(j);
                                    col.innerHTML=dataList[i][j];
                                }
                            }


                            //分页部分
                            var total=parseInt(pageList[0][0]);
                            var start=parseInt(pageList[0][1]);
                            var end=parseInt(pageList[0][2]);
                            var current=parseInt(pageList[0][3]);

                            var c1_HTML='显示 '+(1+start)+' 到 '+end+' 笔，共 '+total+' 笔';
                            var c2_HTML='';

                            if(start>0){
                                var prvNo=current-1;
                                c2_HTML+='<a href="javascript:QueryList('+prvNo+')">[上一页] </a>';
                            }else{
                                c2_HTML+='[上一页] ';
                            }
                            var totalPage=parseInt(total/10);
                            if(total%10!=0){
                                totalPage++;
                            };
                            for(var i=1; i <=totalPage; i++){
                                    if(i == 2 && current-6 > 1){
                                        c2_HTML+='...';
                                        i = current- 6;
                                    } else if(i == current + 6 && current +6<totalPage){
                                        c2_HTML+='...';
                                        i = totalPage - 1;
                                    } else{
                                        if(current==i){
                                            c2_HTML+='['+current+'] ';
                                        }else{
                                            c2_HTML+='<a href="javascript:QueryList('+i+')">'+i+'</a>'+' ';
                                        }
                                    }
                            }

                            if(current<totalPage){
                                var nextNo=current+1;
                                c2_HTML+='<a href="javascript:QueryList('+nextNo+')">[下一页]</a>';
                            }else{
                                c2_HTML+='[下一页]';
                            }
                            var pagintion = document.createElement("table");
                            pagintion.className="footer";
                            var rightDiv=document.createElement('div');
                            rightDiv.setAttribute("align","right");

                            var row=pagintion.insertRow(0);
                            var col_1=row.insertCell(0);
                            var col_2=row.insertCell(1);

                            col_1.innerHTML=c1_HTML;
                            rightDiv.innerHTML=c2_HTML;
                            col_2.appendChild(rightDiv);
                            var footPanel=$("footPanel");
                            footPanel.replaceChild(pagintion,footPanel.firstChild);
                        }catch(e){
                            alert("error");
                        }
                        highlightTableRows("myTable");
            }//end showTable

 

其中还有用到的分页对象Pagination ，及页面的xml解析对象MyXmlParser这里就不贴code出来了．附件中有Demo.war包和project文件．感兴趣的朋友可以下载来看看．

测试环境如下：
JDK:1.5
开发工具：Eclipse3.1
部署服务器：Tomcat5.5