zoukankan      html  css  js  c++  java
  • 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);
            }
        }
    }
  • 相关阅读:
    POJ--2112--Optimal Milking【Floyd+Dinic+二分答案】
    HTML5之WEB Storage
    java多线程具体总结
    CSU 1541 There is No Alternative (最小生成树+枚举)
    Blade
    数据模型封装演示样例
    Java中接口和抽象类的比較
    句子逆序
    王立平--split字符串切割
    UVA 12538 Version Controlled IDE 解题报告
  • 原文地址:https://www.cnblogs.com/zxiong/p/4105969.html
Copyright © 2011-2022 走看看