利用jquery分页

数据量大,就得有分页,我以前做的分页大部分都是用一个java分页器来实现的,今天晚上,做了一个用juery的分页器....

首先:随便建立一个jsp页面,导入jquery的库,然后写一些模拟的数据,就可以勒,下面是我做的分页小例:

<%@ page language="java" pageEncoding="UTF-8"%>

<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean" %>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic" %>
<%@ taglib uri="http://struts.apache.org/tags-tiles" prefix="tiles" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<style type="text/css">
        li{
                cursor:pointer
        }
</style>
<script type="text/javascript">
$( function(){
        var currentPage = 1, pageSize = 10;
        var recordCount = $( 'tbody>tr', $( 'table' ) ).length;
        var pageCount = Math.ceil( recordCount / pageSize );
       
        function showPage( $page ){
                $( 'tbody', $( 'table' ) ).find( 'tr' ).show()
                                                                .filter( ':gt('+ ( $page * pageSize - 1 ) +')' ).hide().end()
                                                                .filter( ':lt('+ ( ( $page - 1 ) * pageSize ) +')' ).hide().end();
                $( '#msg' ).html( '共'+recordCount+'条记录, 当前第'+$page+'/'+pageCount+'页, 每页'+pageSize+'条记录' );
        }
        showPage( currentPage );
        $( 'ul>li', $( '#button' ) ).each( function(){
                var $current = $( this );
                switch( $current.parent().children().index( $current ) ){
                        case 0:
                                        $current.bind( 'click', function(){
                                                currentPage = 1;
                                                showPage( currentPage );
                                        } );
                                break;
                        case 1:
                                        $current.bind( 'click', function(){
                                                currentPage = currentPage > 1 ? ( currentPage - 1 ) : currentPage ;
                                                showPage( currentPage );
                                        } );
                                break;
                        case 2:
                                        $current.bind( 'click', function(){
                                                currentPage = currentPage < pageCount ? ( currentPage + 1 ) : currentPage ;
                                                showPage( currentPage );
                                        } );
                                break;
                        case 3:
                                        $current.bind( 'click', function(){
                                        currentPage = pageCount;
                                                showPage( currentPage );
                                        } );
                                break;
                }
        } );
       
        $( 'span :input:button', $( '#button' ) ).unbind( 'click' ).bind( 'click', function(){
                var num = parseInt( $( 'span :input:text', $( '#button' ) ).val() );
                if( isNaN( num ) || num < 1 ){
                        num = 1;
                }else if( num > pageCount ){
                        num = pageCount;
                }
                showPage( num );
        } );
        //alert( pageCount );
} );
</script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<table width="200" border="1">
        <thead>
        <tr>
            <td>数据 1</td>
            <td>数据 2</td>
            <td>数据 3</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>9</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>1</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>3</td>
            <td>6</td>
            <td>2</td>
        </tr>
        <tr>
            <td>6</td>
            <td>0</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>1</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>3</td>
            <td>6</td>
            <td>2</td>
        </tr>
        <tr>
            <td>6</td>
            <td>0</td>
            <td>3</td>
        </tr>
        <tr>
            <td>9</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>1</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>3</td>
            <td>6</td>
            <td>2</td>
        </tr>
        <tr>
            <td>6</td>
            <td>0</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>1</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
        <tr>
            <td>3</td>
            <td>6</td>
            <td>2</td>
        </tr>
        <tr>
            <td>6</td>
            <td>0</td>
            <td>3</td>
        </tr>
  </tbody>
</table>
<div id="msg"></div>
<div id="button">
        <ul>
            <li>首页</li>
        <li>上一页</li>
        <li>下一页</li>
        <li>末页</li>
    </ul>
    <span>
            <input type="text" />
        <input type="button" value="跳转" />
    </span>
</div>

你可能感兴趣的:(JavaScript,apache,jquery,bean,struts)