用jquery实现分页效果

<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>