分页技术在网页中的应用-优快云博客

1、分页bean

import java.io.Serializable;

public class PagerBean implements Serializable
{
    private static final long serialVersionUID = 5523540943779813401L;

    /**
     * 页码
     */
    private int pageIndex = 1;

    /**
     * 每页记录数
     */
    private int pageCount = 0;

    /**
     * 总页数
     */
    private int totalPage = 1;

    /**
     * 总记录数
     */
    private int totalRecordCount = 0;

    public int getPageIndex()
    {
        return pageIndex;
    }

    public void setPageIndex( int pageIndex )
    {
        this.pageIndex = pageIndex;
    }

    public int getPageCount()
    {
        return pageCount;
    }

    public void setPageCount( int pageCount )
    {
        this.pageCount = pageCount;
    }

    public int getTotalPage()
    {
        return totalPage;
    }

    public void setTotalPage( int totalPage )
    {
        this.totalPage = totalPage;
    }

    public int getTotalRecordCount()
    {
        return totalRecordCount;
    }

    public void setTotalRecordCount( int totalRecordCount )
    {
        this.totalRecordCount = totalRecordCount;
    }

    // 每页容量 页码必须大于0,否则抛出IllegalArgumentException
    public static PagerBean getPagerBean( int totalRecordCount, int pageCount,
            int pageIndex )
    {
        if ( pageCount <= 0 )
        {
            throw new IllegalArgumentException(
                    "pageCount can't be less than zero" );
        }
        int totalPage = totalRecordCount / pageCount
                + (totalRecordCount % pageCount > 0 ? 1 : 0);
        totalPage = Math.max( 1, totalPage );
        pageIndex = Math.max( 1, Math.min( pageIndex, totalPage ) );
        PagerBean pager = new PagerBean();
        pager.setPageCount( pageCount );
        pager.setPageIndex( pageIndex );
        pager.setTotalPage( totalPage );
        pager.setTotalRecordCount( totalRecordCount );
        return pager;
    }
}

2、javascript 处理

<script type="text/javascript">
     var pageIndex = "<s:property value='#request.pagerBean.pageIndex'/>";
     
     function pageNumCheck(){
         var tmp_v = $("#txtPageNum").val();
         
         if (parseInt(tmp_v) != tmp_v) {
             tmp_v = tmp_v.replace(/\D/g, '');
             tmp_v = tmp_v.replace(/^0*/g, '');
             $("#txtPageNum").val(tmp_v);
             $("#txtPageNum").val(tmp_v);
         }
     }
     
     function previousPage(){
         var page = parseInt(pageIndex);
         goTo(--page);
     }
     
     function nextPage(){
         var page = parseInt(pageIndex);
         goTo(++page);
     }
     
     function firstPage(){
         goTo(1);
     }
     
     function lastPage(){
         goTo("<s:property value='#request.pagerBean.totalPage' />");
     }
     
     function pageTo(){
     
         var pageNum = $("#txtPageNum").val();
         var pageIndex = $("#pageIndex").text();
         if (pageNum === pageIndex) {
             goTo(pageIndex);
         }
         
         if (checkNum(pageNum)) {
             var INT_MAX_VALUE = 2147483647;
             var pageIndex = parseInt(pageNum);
             if (pageIndex - INT_MAX_VALUE > 0 || pageIndex - INT_MAX_VALUE < -2147483647) 
                 pageIndex = INT_MAX_VALUE;
             goTo(pageIndex);
         }
         else {
             goTo(1);
             $("#txtPageNum").val("");
             $("#txtPageNum").focus();
         }
     }
     
     function checkNum(numStr){
         var numReg = /^[1-9][0-9]*$/;
         return numReg.test(numStr);
     }

     function goTo(page)
     {
    	 var command = $("#selYear").val();
    	 window.location.href = "announcementAction!queryWhatNewList.action?command="+command+"&pageIndex="+page; 
     }
</script>

3、jsp 页面样式

 <div id="pagediv" style="float:right;">
                <table class="pagerTab" style="float:right;width:auto;height:32px;">
                    <tr>
                        <td style="padding-right:0px;vertical-align:bottom; text-align:right;width: 80px;">
                            <s:if test="#request.pagerBean.pageIndex>1">
                                <img class="pagination" src="comm/img/first.gif" οnclick='firstPage();' 
								     title="<s:text name='Pager.first'/>" />
                                <img class="pagination" src="comm/img/previous.gif" οnclick='previousPage();' 
								     title="<s:text name='Pager.previous'/>" />
                            </s:if>
                            <s:else>
                                <img src="comm/img/first_disabled.gif" title="<s:text name='Pager.first'/>" />
                                <img src="comm/img/previous_disabled.gif" title="<s:text name='Pager.previous'/>" />
                            </s:else>
                            <s:if test="#request.pagerBean.pageIndex==#request.pagerBean.totalPage">
                                <img src="comm/img/next_disabled.gif" title="<s:text name='Pager.next'/>" />
                                <img src="comm/img/last_disabled.gif" title="<s:text name='Pager.last'/>" />
                            </s:if>
                            <s:else>
                                <img class="pagination" src="comm/img/next.gif" οnclick='nextPage();' title="<s:text name='Pager.next'/>" />
                                <img class="pagination" src="comm/img/last.gif" οnclick='lastPage();' title="<s:text name='Pager.last'/>" />
                            </s:else>
                        </td>
                        <td>
                            <s:text name="Pager.page"/>:
                        </td>
                        <td>
                            <span id="pageIndex"><s:property value="#request.pagerBean.pageIndex"/></span>/
							<span id="totalPage"><s:property value="#request.pagerBean.totalPage"/></span>
                        </td>
                        <td>
                        </td>
                        <td>
                            <input id="txtPageNum" type="text" class="paging_list_input" οnkeyup="pageNumCheck()" 
							style="border: #ccc 1px solid;"/>
                        </td>
                        <td>
                            <div style="background: url(comm/skin/images/paging_list_bg.png) no-repeat;width: 28px;height: 28px;
							    overflow: hidden;line-height: 28px;text-align: center;float: left;margin-left: 6px;">
                                <a id="btnGotoPageNum" href="javascript:void(0)" οnclick="pageTo()"><s:text name='Pager.goto'/></a>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>

jsp 页面样式

 <div id="pagediv" style="float:right;">
                <table class="pagerTab" style="float:right;width:auto;height:32px;">
                    <tr>
                        <td style="padding-right:0px;vertical-align:bottom; text-align:right;width: 80px;">
                            <s:if test="#request.pagerBean.pageIndex>1">
				<span οnclick='firstPage();' ><s:text name='Pager.first'/></span/>
				<span οnclick='previousPage();' ><s:text name='Pager.previous'/></span/>
                            </s:if>
                            <s:else>
				<span><s:text name='Pager.first'/></span/>
				<span><s:text name='Pager.previous'/></span/>
                            </s:else>
                            <s:if test="#request.pagerBean.pageIndex==#request.pagerBean.totalPage">
				<span οnclick='nextPage();' ><s:text name='Pager.next'/></span/>
				<span οnclick='lastPage();' ><s:text name='Pager.last'/></span/>
                            </s:if>
                            <s:else>
				<span><s:text name='Pager.next'/></span/>
				<span><s:text name='Pager.last'/></span/>
                            </s:else>
                        </td>
                        <td>
                            <s:text name="Pager.page"/>:
                        </td>
                        <td>
                            <span id="pageIndex"><s:property value="#request.pagerBean.pageIndex"/></span>   
			/
			<span id="totalPage"><s:property value="#request.pagerBean.totalPage"/></span>
                        </td>
                        <td>
                        </td>
                        <td>
                            <input id="txtPageNum" type="text" οnkeyup="pageNumCheck()"style="border: #ccc 1px solid;"/>
                        </td>
                        <td>
                            <div>
                                <a id="btnGotoPageNum" href="javascript:void(0)" οnclick="pageTo()"><s:text name='Pager.goto'/></a>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>

sql简写

select a.*
  from (select t.*, rownum as num from (select n.* from pd_datawhatsnew n) t) a
 where num > (#pageIndex# - 1) * #pageCount#
   and num <= #pageIndex# * #pageCount#

action处理

只获取当前页和页的大小。

分页bean保存到request对象中。