求一个jQuery+JSP无刷新翻页实例

无刷新，没什么可讲的，就是用jquery的ajax方法，或者get，或者post，返回json数据，要自己学习

1、直接使用jQuery的表格插件试试2、将你要分页显示的内容单独写到一个页面中，然后配置一个action去返回这个页面的数据，在你的主页面通过jQuery异步调用这个action，将其返回的data（即每一页的数据）输出到你指定的地点，比如一个DIV中。

<%@ 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" %>
<html>
<head>
<script type="text/javascript" src="js\jquery-1.4.3.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 );
        } );
} );
</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>
</head>
</html>

我也要开始接触jquery，过来学习学习

调试易

求一个jQuery+JSP无刷新翻页实例

解决方案 »