給大家個jquery $.getJSON的例子

　　用到的CSS文件       position: relative;
}

　　.pgContainer {
    min-height:100px;
    _height:100px;
}

　　.pgToolbar {
    width:100%;
    height:30px;
    font-size:12px;
    line-height:30px;
    background: url(../images/wbg.gif);
}

　　.pgPanel {
    float:left;
    padding:0 10px 0 10px;
}

　　.pgToolbar div {
    float:left;
}

　　.pgBtn {
    width: 20px;
    height: 28px;
    display: block;
    cursor: pointer;
    margin:1px;
}

　　.pgPress {
    margin:2px 0 0 2px;
}

　　.pgPrev {
    background: url(../images/prev.gif) no-repeat center;
}

　　.pgPrevDisabled {
    background: url(../images/prev_disabled.gif) no-repeat center;
    cursor:auto;
}

　　.pgNext {
    background: url(../images/next.gif) no-repeat center;
}

　　.pgNextDisabled{
    background: url(../images/next_disabled.gif) no-repeat center;
    cursor:auto;
}

　　.pgFirst {
    background: url(../images/first.gif) no-repeat center;
}

　　.pgFirstDisabled {
    background: url(../images/first_disabled.gif) no-repeat center;
    cursor:auto;
}

　　.pgLast {
    background: url(../images/last.gif) no-repeat center;
}

　　.pgLastDisabled {
    background: url(../images/last_disabled.gif) no-repeat center;
    cursor:auto;
}

　　.pgRefresh {
    background: url(../images/load.png) no-repeat center;
}

　　.pgLoad {
    background: url(../images/load.gif) no-repeat center;
}

　　.pgCurrentPage {
    width:30px;
    height:16px;
    line-height:16px;
    text-align:center;
    border:1px solid #CCCCCC;
}

　　.pgSearchInfo {
    margin-left:20px;
}

　　.mask {
    width: 100%;
    height: 100%;
    background: url(../images/loading.gif) no-repeat center;
    background-color: #FFFFFF;
    position: absolute;
    zIndex: 999;
    top:0;
    left:0;
    filter:alpha(opacity=70);
    -moz-opacity:0.70;
    opacity:.70;
}

　　.cleanFloat {
    clear:both;
    display:none;
}

　　.separator {
    width:2px;
    height:30px;
    margin:0 5px 0 5px;
    background: url(../images/separator.gif) no-repeat center;
}

　　th {
        background:#0066FF;
        color:#FFFFFF;
        line-height:20px;
        height:30px;
}

　　td {
        padding:6px 11px;
        border-bottom:1px solid #95bce2;
        vertical-align:top;
        text-align:center;
}

　　td * {
        padding:6px 11px;
}

　　tr.alt td {
        background:#ecf6fc;
}

　　tr.over td {
        background:#bcd4ec;
}

　　2.擴展的Jquery插件

　　  jQuery.fn.pagination = function(config){
    init("#"+this.attr("id"),config);
}

　　function init(t,config){

　　var totalRecord = config.totalRecord > 0 ? config.totalRecord : 0;//總記錄數
    if(totalRecord == 0){
        $(t).css("text-align","center");
        $(t).css("line-height","50px");
        $(l("很遺憾，沒有檢索到任何記錄！");
        return;
    }
    var configPage = config.perPage > 0 ? config.perPage : 10;

　　var perPage = okie(t+"_perPage") == null ? configPage : parseInt(okie(t+"_perPage"));//每頁顯示記錄數
    var proxyUrl = config.proxyUrl;//請求發送地址
    var groupSize = config.groupSize;//組大小
    var barPosition = config.barPosition == null ? 'bottom' : config.barPosition;//工具條位置
    var ajaxParam = config.ajaxParam;                                                                                                                                //ajax的請求參數

　　//私有變量
    var totalPage = Math.ceil(totalRecord/perPage);//總頁數
    var currentPage = okie(t+"_currentPage") == null ? 1 : parseInt(okie(t+"_currentPage"));//當前頁碼
    var startRecord;//每頁起始記錄
    var endRecord;//每頁結束記錄
    var gpStartPage;
    var gpEndPage;
    var gpStartRecord;
    var gpEndRecord;

　　//數據容器
    var container = '<div class="pgContainer"></div>'

　　//添加工具條
    var toolbar = '<div class="pgToolbar">';
    toolbar += '<div class="pgPanel">';
    toolbar += '<div><select class="pgPerPage">';
    if(config.perPage>0)
        toolbar += '<option value="'+config.perPage+'">'+config.perPage+'</option>';
    toolbar += '<option value="5">5</option>';
    toolbar += '<option value="10">10</option>';
    toolbar += '<option value="15">15</option>';
    toolbar += '<option value="20">20</option>';
    toolbar += '<option value="25">25</option>';
    toolbar += '<option value="40">40</option>';
    toolbar += '</select>&nbsp;</div>';
    toolbar += '<div class="separator"></div>';
    toolbar += '<div class="pgBtn pgFirst" title="首頁"></div>';
    toolbar += '<div class="pgBtn pgPrev" title="上頁"></div>';
    toolbar += '<div class="separator"></div>';
    toolbar += '<div>第 <input class="pgCurrentPage" type="text" value="' + currentPage + '" title="頁碼" /> 頁 / 共 <span class="pgTotalPage">' + totalPage + '</span> 頁</div>';
    toolbar += '<div class="separator"></div>';
    toolbar += '<div class="pgBtn pgNext" title="下頁"></div>';
    toolbar += '<div class="pgBtn pgLast" title="尾頁"></div>';
    toolbar += '<div class="separator"></div>';
    toolbar += '<div class="pgBtn pgRefresh" title="刷新"></div>';

　　toolbar += '<div class="separator"></div>';
    toolbar += '<div class="pgSearchInfo">檢索到&nbsp;' + totalRecord + '&nbsp;條記錄，顯示第&nbsp;<span class="pgStartRecord">' + startRecord + '</span>&nbsp;條&nbsp;-&nbsp;第&nbsp;<span class="pgEndRecord">' + endRecord + '</span>&nbsp;條記錄</div>';
    toolbar += '<hr class="cleanFloat" /></div>';
    toolbar += '</div>';

　　if(perPage<totalRecord)
                $(l(container+toolbar);
    else
        $(l(container);

　　var btnRefresh = $(t+" .pgRefresh");//刷新按鈕
    var btnNext =$(t+" .pgNext");//下一頁按鈕
    var btnPrev = $(t+" .pgPrev");//上一頁按鈕
    var btnFirst = $(t+" .pgFirst");//首頁按鈕
    var btnLast = $(t+" .pgLast");//末頁按鈕
    var btnGo = $(t+" .pgNext,"+t+" .pgLast");
    var btnBack = $(t+" .pgPrev,"+t+" .pgFirst");
    var btn = $(t+" .pgFirst,"+t+" .pgPrev,"+t+" .pgNext,"+t+" .pgLast");
    var mask;

　　var valCurrentPage = $(t+" .pgCurrentPage");
    var valStartRecord = $(t+" .pgStartRecord");
    var valEndRecord =$(t+" .pgEndRecord");
    var valContainer = $(t+" .pgContainer");
    var valPerPage = $(t+" .pgPerPage");
    var valTotalPage = $(t+" .pgTotalPage");

　　$(t+" .pgPerPage").attr("value",perPage);
    getGroupStartEnd();
    getStartEnd();
    getRemoteData();

　　//刷新按鈕監聽
    btnRefresh.bind("mousedown",pressHandler).bind("mouseup",unpressHandler).bind("mouseout",unpressHandler);

　　//刷新工具欄
    refresh();

　　//按鈕監聽
    //點擊"下一頁"按鈕
    btnNext.click(
        function(){
            if(currentPage < totalPage){
                    currentPage += 1;
                    getStartEnd();
                    getRemoteData();

　　}
        }
    );
    //點擊"前一頁"按鈕
    btnPrev.click(
        function(){
            if(currentPage > 1){

　　currentPage -= 1;
                    getStartEnd();
                    getRemoteData();

　　}
        }
    );
    //點擊"首頁"按鈕
    btnFirst.click(
        function(){
            if(currentPage > 1){

　　currentPage = 1;

　　getStartEnd();
                    getRemoteData();

　　}
        }
    );
    //最後一頁
    btnLast.click(
        function(){
            if(currentPage < totalPage){

　　currentPage = totalPage;

　　getStartEnd();
                    getRemoteData();

　　}
        }
    );
    btnRefresh.click(
        function(){
            getStartEnd();
            getRemoteData();
        }
    );

　　//頁碼輸入框監聽
    valCurrentPage.keydown(
        function(){
            var targetPage = parseInt($(this).val());
            if(event.keyCode==13 && targetPage>=1 && targetPage<=totalPage){
                    currentPage = targetPage;
                    getStartEnd();
                    getRemoteData();

　　}
        }
    );

　　valPerPage.change(
        function(){
            perPage = parseInt($(this).val());
            currentPage = 1;
            totalPage = Math.ceil(totalRecord/perPage);
            getStartEnd();
            getRemoteData();

　　}
    );

　　/*********************************init私有函數***************************************************/
    /**
       * 置為正在檢索狀態
       */
    function startLoad(){
        $(t).addClass("container");
        mask = document.createElement('div');
        $(mask).addClass("mask");
        $(mask).css("height",$(t).height());
        $(t).append(mask);
        $(t+" .pgRefresh").addClass("pgLoad");
        $(t+" .pgSearchInfo"l("正在檢索中，請稍後...");
    }

　　/**
       * 置為結束檢索狀態
       */
    function overLoad(){
        $(t+" .pgRefresh").removeClass("pgLoad");
        $(t+" .pgSearchInfo"l('檢索到&nbsp;' + totalRecord + '&nbsp;條記錄，顯示第&nbsp;<span class="pgStartRecord">' + startRecord + '</span>&nbsp;條&nbsp;-&nbsp;第&nbsp;<span class="pgEndRecord">' + endRecord + '</span>&nbsp;條記錄');
        //$(mask).remove();
        $(mask).fadeOut("slow");
    }

　　/**
       * 獲得遠程數據
       */
/**    function getRemoteData(){
        startLoad();
        $.ajax(
            {
                type: "POST",
                url: proxyUrl,
                cache: false,
                data: {current:currentPage,perPage:perPage},
                dataType: "html",
                timeout: 30000,
                success: function(msg){
                    getStartEnd();
                    loadData(msg);
                    refresh();
                    overLoad();
                },
                error: function(){
                    alert("請求失敗或超時，請稍後再試！");
                    overLoad();
                    return;
                }
            }
        )
    }

　　/**
       * 獲得當前頁開始結束記錄
       */

　　function getRemoteData(){
        startLoad();
        $.ajax(
            {
                type: "GET",
                url: proxyUrl,
                cache: false,
                data: {current:currentPage,perPage:perPage},
                dataType: "json",
                timeout: 30000,
                success: function(json){
                    var len=json.length;
                    var msg="";
                    msg="<table width=100% class='stripe' border='0' cellspacing='0 cellpadding='0><tr><th>名稱</th><th>url地址</th><th>幫助id</th></tr>";
                    for(var i=0;i<json.length;i++)
                    {
                        msg+="<tr><td width=30%>"+json[i].name+"</td>";
                        msg+="<td width=50%>"+json[i].url+"</td>";
                        msg+="<td width=20%>"+json[i].helpTopicId+"</td></tr>";

　　}
                    msg+="</table>";

　　getStartEnd();
                    loadData(msg);
                    refresh();
                    overLoad();
                },
                error: function(){
                    alert("請求失敗或超時，請稍後再試！");
                    overLoad();
                    return;
                }
            }
        )
    }

　　function getStartEnd(){
            startRecord = (currentPage-1)*perPage+1;
            endRecord = Math.min(currentPage*perPage,totalRecord);

　　}

　　/**
       * 獲得當前組開始結束頁碼
       */
    function getGroupStartEnd(){
        if(groupSize==null)
            return;
        var groupId = Math.ceil(currentPage/groupSize);
        gpStartPage = (groupId-1)*groupSize+1;
        gpEndPage = Math.min(groupId*groupSize,totalPage);
        gpStartRecord = (gpStartPage-1)*perPage+1;
        gpEndRecord = Math.min(gpEndPage*perPage,totalRecord);
    }

　　/**
       * 刷新數據容器
       */
    function loadData(msg){
        l(msg);
    }

　　/**
       * 刷新工具欄狀態
       */
    function refresh(){
        //當前頁碼寫入cookie
        okie(t+'_currentPage', currentPage);
        okie(t+'_perPage', perPage);

　　valCurrentPage.val(currentPage);//當前頁
        l(startRecord);//開始記錄
        l(endRecord);//結束記錄
        l(totalPage);//總頁數

　　btn.unbind("mousedown",pressHandler);//取消鼠標按下的功能
        btn.bind("mouseup",unpressHandler);//綁定
        btn.bind("mouseout",unpressHandler);
        if(currentPage == totalPage){
            enabled();
            btnBack.bind("mousedown",pressHandler);
            btnNext.addClass("pgNextDisabled");
            btnLast.addClass("pgLastDisabled");
        }else    if(currentPage == 1){
            enabled();
            btnGo.bind("mousedown",pressHandler);
            btnPrev.addClass("pgPrevDisabled");
            btnFirst.addClass("pgFirstDisabled");
        }else{
            enabled();
            btnBack.bind("mousedown",pressHandler);
            btnGo.bind("mousedown",pressHandler);
            btnNext.addClass("pgNext");
            btnPrev.addClass("pgPrev");
            btnFirst.addClass("pgFirst");
            btnLast.addClass("pgLast");
        }
    }

　　/**
       * 移除按鈕disabled狀態樣式
       */
    function enabled(){
            btnNext.removeClass("pgNextDisabled");
            btnPrev.removeClass("pgPrevDisabled");
            btnFirst.removeClass("pgFirstDisabled");
            btnLast.removeClass("pgLastDisabled");
    }

　　/**
       * 添加按鈕按下狀態樣式
       */
    function pressHandler(){
        $(this).addClass("pgPress");
    }

　　/**
       * 移除按鈕按下狀態樣式
       */
    function unpressHandler(){
        $(this).removeClass("pgPress");
    }

　　}

    3.JSP頁面最簡單的代碼
      </style>
        <script type="text/javascript" src="../../js/jquery.js"></script>
        <script type="text/javascript" src="../../js/jquerycookie.js"></script>
        <script type="text/javascript" src="../../js/pagination.js"></script>
        <script language="javascript">
        $(document).ready(
            function(){
            $("#pagetest").pagination({totalRecord:${p},proxyUrl:'data.action'});

　　});

　　</script>
    </head>
    <body>

　　<div >

　　<div id="pagetest" ></div>
            <hr />
         </div>
    </body>

From:http://tw.wingwit.com/Article/program/Java/hx/201311/11146.html