Ajax分页js代码

var pageIndex = 0;
var pageSize = 10;
$(function () {
    $("#btnSearch").click(function () {
        var name = $("#txtSearch").val();
        pageIndex = 0;
        AjaxGetData(name, pageIndex, pageSize);
    });
    AjaxGetData(name, pageIndex, pageSize);
});

function AjaxGetData(name, index, size) {
    $.ajax({
        url: "PageHandler.ashx",
        type: "Get",
        data: "Name=" + name + "&PageIndex=" + index + "&PageSize=" + size,
        dataType: "json",
        success: function (data) {
            var htmlStr = "";
            htmlStr += "<table>"
            htmlStr += "<thead>"
            htmlStr += "<tr><td>CustomerID</td><td>CompanyName</td><td>ContactName</td><td>ContactTitle</td><td>Address</td><td>City</td></tr>"
            htmlStr += "</thead>";
            htmlStr += "<tbody>"
            for (var i = 0; i < data.Customers.length; i++) {
                htmlStr += "<tr>";
                htmlStr += "<td>" + data.Customers[i].CustomerID + "</td>"
                                  + "<td>" + data.Customers[i].CompanyName + "</td>"
                                  + "<td>" + data.Customers[i].ContactName + "</td>"
                                  + "<td>" + data.Customers[i].ContactTitle + "</td>"
                                  + "<td>" + data.Customers[i].Address + "</td>"
                                  + "<td>" + data.Customers[i].City + "</td>"
                htmlStr += "</tr>";
            }
            htmlStr += "</tbody>";
            htmlStr += "<tfoot>";
            htmlStr += "<tr>";
            htmlStr += "<td colspan='6'>";
            htmlStr += "<span>共有记录" + data.Count + ";共<span id='count'>" + (data.Count % 10 == 0 ? parseInt(data.Count / 10) : parseInt(data.Count / 10 + 1)) + "</span>页" + "</span>";
            htmlStr += "<a href='javascript:void' onclick='GoToFirstPage()' id='aFirstPage' >首    页</a>&nbsp;&nbsp; ";
            htmlStr += "<a href='javascript:void' onclick='GoToPrePage()' id='aPrePage' >前一页</a>&nbsp;&nbsp; ";
            htmlStr += "<a href='javascript:void' onclick='GoToNextPage()' id='aNextPage'>后一页</a>&nbsp;&nbsp; ";
            htmlStr += "<a href='javascript:void' onclick='GoToEndPage()' id='aEndPage' >尾    页</a>&nbsp;&nbsp; ";
            htmlStr += "<input type='text' /><input type='button'  value='跳转' onclick='GoToAppointPage(this)' /> ";
            htmlStr += "</td>";
            htmlStr += "</tr>";
            htmlStr += "</tfoot>";
            htmlStr += "</table>";

            $("#divSearchResult").html(htmlStr);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            $("#divSearchResult").html("未查询到任何项!");
        }
    });
}
//首页
function GoToFirstPage() {
    pageIndex = 0;
    AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
}
//前一页
function GoToPrePage() {
    pageIndex -= 1;
    pageIndex = pageIndex >= 0 ? pageIndex : 0;
    AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
}
//后一页
function GoToNextPage() {
    if (pageIndex + 1 < parseInt($("#count").text())) {
        pageIndex += 1;
    }
    AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
}
//尾页
function GoToEndPage() {
    pageIndex = parseInt($("#count").text()) - 1;
    AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
}
//跳转
function GoToAppointPage(e) {
    var page = $(e).prev().val();
    if (isNaN(page)) {
        alert("请输入数字!");
    }
    else {
        var tempPageIndex = pageIndex;
        pageIndex = parseInt($(e).prev().val()) - 1;
        if (pageIndex < 0 || pageIndex >= parseInt($("#count").text())) {
            pageIndex = tempPageIndex;
            alert("请输入有效的页面范围!");
        }
        else {
            AjaxGetData($("#txtSearch").val(), pageIndex, pageSize);
        }
    }
}

 

posted @ 2014-11-18 15:45  梦锁湘江  阅读(373)  评论(0编辑  收藏  举报