ajax实现分页（项目整理）

/*
 * author:alex
 * updateTime:2015-11-11 18:18
 * ajax分页
 */
(function ($) {
         $.ajaxPage = function(options) { //定义插件的名称，这里为ajaxPage
             var parameter = {
                 requestData:{
                     pageNo:1,
                     pageSize:10
                 }
            };
            var obj = $.extend(parameter,options);
            if($(".ajax-load").length==0){
                var alertHtml = '<div class="ajax-load" style="background-image:url(/galaxy_pc_clients/resource/image/ajax-bg.png)"><img src="/galaxy_pc_clients/resource/image/load.gif" /></div>'
                $("body").prepend(alertHtml);
            };
             $(".ajax-load").show();
            var time ="";
            var status = "";
            $.ajax({
                type:obj.type,
                url:obj.url,
                dataType:obj.dataType,
                data:obj.data,
                success:function(json){
                    var pageSelect;
                    obj.success(json);
                    for(var j=1;j<=json.result.pageCount;j++){
                         pageSelect+="<option value="+j+">"+j+"</option>";
                     }
                     $("#pageNo").html(pageSelect);
                     $("#pageNo option:eq("+(json.result.pageNo-1)+")").attr("selected","selected");
                    pageNoClick();
                    $(".ajax-load").hide();
                    
                },
                error:function(json){
                        alert("网络错误，请检查")
                }
            });
            
        }
})(jQuery);
$(function(){
    $("#pageSize,#pageNo").change(function(){
        ajaxRun();
    })
    
    $("#pageIndex").on("click",function(){
        if( $("#pageNo").val()>1&&$("#pageNo").val()!=""){
             $("#pageNo").val("1");
             ajaxRun();
        }
    })
    $("#pageLast").on("click",function(){
        if( $("#pageNo").val()>1&&$("#pageNo").val()!=""){
            $("#pageNo").find("option:selected").attr("selected",false).prev().attr("selected",true);
            ajaxRun();
        }
    })
    $("#pageNext").on("click",function(){
        if( $("#pageNo").val()!=$("#pageNo option:last").val()){
            $("#pageNo").find("option:selected").attr("selected",false).next().attr("selected",true);
            ajaxRun();
        }
    })
    $("#pageFooter").on("click",function(){
        if( $("#pageNo").val()!=$("#pageNo option:last").val()){
             $("#pageNo").val($("#pageNo option:last").val());
             ajaxRun();
        }
    })
    $('#filtrateStatus').change(function(){
        $("#pageNo").find("option:eq(0)").attr("selected",true);
        ajaxRun();
    });
})
function pageNoClick(){    //分页禁用按钮
    
    if($("#pageNo").val()==$("#pageNo option:first").val()){
        $("#pageLast").addClass("btn-notclick");
    }else{
        $("#pageLast").removeClass("btn-notclick");
    }
    if($("#pageNo").val()==$("#pageNo option:last").val()){
        $("#pageNext").addClass("btn-notclick");
    }else{
        $("#pageNext").removeClass("btn-notclick");
    }
    if($("#pageNo").val()==1||$("#pageNo").val()==null){
        $("#pageIndex").addClass("btn-notclick");
    }else{
        $("#pageIndex").removeClass("btn-notclick");
    }
    if($("#pageNo").val()==$("#pageNo option:last").val()){
        $("#pageFooter").addClass("btn-notclick");
    }else{
        $("#pageFooter").removeClass("btn-notclick");
    }
    
}

 

前台使用代码：

      <table class="pager">
            <tbody>
                <tr>
                    <td width="40%">
                        &nbsp;&nbsp;共有 <span id="financeAllNumber">${pager.rowCount}</span> 条记录，每页行数：
                        <select name="pageSize" id="pageSize">
                            <option value="5">5</option>
                            <option value="10" selected="selected">10</option>
                            <option value="30">30</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                        </select>
                        当前第
                        <select name="pageNo" id="pageNo">
                            <c:forEach var="i" begin="1" end="${pager.pageCount}">
                                <option value="${i}" <c:if test="${i==pageNo}">selected="selected"</c:if>>${i}</option>
                            </c:forEach>
                        </select>
                        页
                    </td>
                    <td width="60%">
                            <a class="btn btn-small" id="pageIndex">首页</a>
                            <a class="btn btn-small" id="pageLast">上一页</a>
                            <a class="btn btn-small" id="pageNext">下一页</a>
                            <a class="btn btn-small" id="pageFooter">尾页</a>
                    </td>
                </tr>
            </tbody>
        </table>

前台js:

               pageNoClick();
               function ajaxRun(){
                    $.ajaxPage({
                        data:{
                            pageNo:$("#pageNo").val(),
                            pageSize:$("#pageSize").val(),
                        },
                        type:'post',
                        url:'ajaxAccountAction!queryAllAccount.action',
                        dataType:'json',
                        success:function(json){
                             $("#pageNo option:eq("+(json.pageNo-1)+")").attr("selected","selected");
                             $("#playTable").html(table);
                         }
                    });
                }