分页的显示视图

<meta name="viewport" content="width=device-width" />
<script src="~/Script/jquery-3.3.1.js"></script>
<title>Index</title>
<script>
    //构造函数
    $(function () {
        showPage();
    });
    //分页显示
    function showPage() {
        //获取姓名
        var name = $("#TextName").val();
        //获取年龄
        var age = $("#TextAge").val();
        //当前页数
        var pindex = $("#pageindex").text();
        //页面记录数
        var psize = $("#pagesize").text();

        //ajax跨域访问WebService string name = "", int age = 0, int pageIndex = 1, int pageSize = 2?name=张&&age=0&&pageIndex=1&&pageSize=2
        $.ajax({
            url: "http://localhost:61159/WebService1.asmx/GetAllStudent",
            type: "post",
            contentType: "application/json",
            dataType: "json",
            data: "{name:'" + name + "',age:'" + age + "',pageIndex:'" + pindex + "',pageSize:'" + psize + "'}",
            success: function (data) {
                $("#mybody").empty();
                if (data.d != null) {
                    $("#allpage").text(data.d[0].TotalPage);
                    $("#allcount").text(data.d[0].TotalCount);
                }
                else {
                    $("#allpage").text(0);
                    $("#allcount").text(0);
                }
                $(data.d).each(function () {
                    var str = '<tr>' +
                              '<td>' + this.Id + '</td>' +
                              '<td>' + this.Name + '</td>' +
                              '<td>' + this.Age + '</td>' +
                              '<td>' + this.CName + '</td>' +
                              '<td>' + this.ScName + '</td>' +
                              '</tr>';
                    $("#mybody").append(str);
                });
            },
            error: function (message) {
                alert(message);
            }
        });
    }

  //分页操作 op:分页4个操作
    function OperatePage(op) {
        //showPage();
        var pindex = $("#pageindex").text();
        var tpage = $("#allpage").text();
        switch (op) {
            case "firstpage":
                pindex = 1;
                break;
            case "prvpage":
                if (parseInt(pindex) - 1 > 0) {
                    pindex--;
                }
                break;
            case "nextpage":
                if (parseInt(pindex) + 1 <= tpage) {
                    pindex++;
                }
                break;
            case "lastpage":
                pindex = tpage;
                break;
        }
        $("#pageindex").text(pindex);
        showPage();
    }

</script>

<div>
    名称：<input id="TextName" type="text" /> 年龄：<input id="TextAge" type="text" value="0" /><input id="Button1" type="button" value="查询" onclick="showPage()" />
    <table>
        <tr>
            <td>编号</td>
            <td>姓名</td>
            <td>年龄</td>
            <td>班级</td>
            <td>学校</td>
        </tr>
        <tbody id="mybody"></tbody>
    </table>
    <div>
        <input id="Button1" type="button" value="首页" onclick="OperatePage('firstpage')" />
        <input id="Button1" type="button" value="上一页" onclick="OperatePage('prvpage')" />
        当前第<label id="pageindex">1</label>页 / 共<label id="allpage"></label>页
        每页<label id="pagesize">1</label>条 / 共<label id="allcount"></label>条
        <input id="Button1" type="button" value="下一页" onclick="OperatePage('nextpage')" />
        <input id="Button1" type="button" value="末页" onclick="OperatePage('lastpage')" />
    </div>
</div>