Web分页显示内容之分页查询的三种思路（一）

在开发过程中，经常做的一件事，也是最基本的事，就是从数据库中查询数据，然后在客户端显示出来。当数据少时，可以在一个页面内显示完成。然而，如果查询记录是几百条、上千条呢？直接一个页面显示完全的话，表格得多长啊。。。。。。这时，我们可以用分页技术。

何为分页？效果图如下：

这里总共查询了100条记录，如果一次性显示的话表格会很多行，用户体验不佳。而我们采用分页显示的话，一页显示10条记录，共十页。用户可以自行翻阅，记录少，清晰显示。

下面谈谈分页效果的实现，思路有三种：
其一：纯JS实现分页
一次性查询记录并加载到html的table中。然后通过选择性地显示某些行来达到分页显示的目的。这是一种伪分页，障眼法而已。只能用于数据少的情况下。一旦数据多了，十几万条数据加载到html中会变得很慢。而且不实时，一次加载完后数据就写死在页面了，若数据库中有变化，浏览器端显示的仍是上次加载过来的数据。

首先：用table来显示查询出来的记录们，全部显示。

<table width="500" id="idData">
            <%
                    String user_id, user_name, user_sex, user_phone, user_age;
                    while (sqlRst.next()) {
                        user_id = sqlRst.getString(1);
                        user_name = sqlRst.getString(2);
                        user_sex = sqlRst.getString(3);
                        user_phone = sqlRst.getString(4);
                        user_age = sqlRst.getString(5);
            %>
            <tr>
                <td><%=user_id%></td>
                <td><%=user_name%></td>
                <td><%=user_sex%></td>
                <td><%=user_phone%></td>
                <td><%=user_age%></td>
            </tr>
            <%
                }
            %>            
        </table>        
        <br/>

    <table width="60%" align="right">
        <tr><td><div id="changePages" name="changePages"></div></td></tr>
    </table>

然后，在JS中修改table中某些行显示，某些行隐藏。

<script type="text/javascript">
    function goPage(pno,psize){
       var itable = document.getElementById("idData");//获取table
       var num = itable.rows.length;//得到记录总数
       var totalPage = 0;
       var pageSize = psize;//一页显示pageSize条记录
       //计算总页数
       if(num/pageSize > parseInt(num/pageSize)){   
            totalPage=parseInt(num/pageSize)+1;   
         }else{   
           totalPage=parseInt(num/pageSize);   
       }   
     //当前页数
      var currentPage = pno;
     //获取当前页第一条、最后一条记录的行号
       var startRow = (currentPage - 1) * pageSize+1;
       var endRow = currentPage * pageSize;
       endRow = (endRow > num)? num : endRow;
      //修改table中当前页对应的行的属性为显示，非本页的记录为隐藏
     for(var i=1;i<(num+1);i++){    
        var irow = itable.rows[i-1];
         if(i>=startRow && i<=endRow){
            irow.style.display = "block";    
          }else{
            irow.style.display = "none";
        }
    }

    //分页页码列表
    var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
    if(currentPage>1){
        tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";
        tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"
    }else{
        tempStr += "首页";
        tempStr += "<上一页";    
    }

    if(currentPage<totalPage){
        tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页></a>";
        tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";
    }else{
        tempStr += "下一页>";
        tempStr += "尾页";    
    }
    document.getElementById("changePages").innerHTML = tempStr;   
}
    </script>

转自博客：http://www.cnblogs.com/ygj0930/p/6134851.html