mvc 显示 分页


@{
    Layout = null;
}
<h2>分页</h2>
<link href="~/Content/pagination.css" rel="stylesheet" />
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script src="~/Scripts/pagination.js"></script>
<div>
    <table id="tb"class=" table table-bordered">
        <tr>
           
            <td>Id</td>
            <td>编号</td>
            <td>日志类型</td>
            <td>日志标题</td>
            <td>发布人</td>
            <td>发布时间</td>
            <td>执行时间</td>
            <td>发布内容</td>
            <td>操作</td>
        </tr>
    </table>
    <div id="pagination" class="pagination">
    </div>
</div>
<script>
    $(function () {
        ShowFenYe();
    });
    function ShowFenYe() {
        $.ajax({
            url: "http://localhost:51251/api/pager?pagesize=2&pageindex=1",
            dataType: "json",
            type: "get",
            success: function (result) {
                Page(result.total);
            }
        });
    }
    function Page(total) {
        $("#pagination").pagination(total,{
            num_edge_entries: 2,
            //省略号前显示多少
            num_display_entries: 5,
            prev_text: "上一页",
            next_text: "下一页",
            //回调一个函数
            callback: CallpagerData,
            //每页显示的值
            items_per_page: 2
        });
    }
    function CallpagerData(page_Index,jq) {
        $.ajax({
            url: "http://localhost:51251/api/pager?pagesize=2&pageindex=" + (page_Index+1),
            dataType: "json",
            type: "get",
            success: function (result) {
                showList(result.data);
            }
        });
    }
   
    function showList(result) {
        var str = "";
        $.each(result, function (i,n) {
            str += "<tr><td>"+n.ID+"</td>";
            str += "<td>" + n.LNumber + "</td>";
            str += "<td>" + n.LogTypeName + "</td>";
            str += "<td>" + n.Title + "</td>";
            str += "<td>" + n.Issuer + "</td>";
            str += "<td>" + n.CreateTime + "</td>";
            str += "<td>" + n.ExeTime + "</td>";
            str += "<td>" + n.Context + "</td>";
            str += "<td><a href='javascript:Delete(" + n.ID + ")'>删除</a><a href='javascript:Update(" + n.ID + ")'>修改</a></td>";
        });
        $("#tb tr:gt(0)").empty()
        $("#tb").append(str);
    }
    function Delete(ID) {
        $.ajax({
            url: "http://localhost:51251/api/Delete ",
            data: {PID:ID},
            dataType: "text",
            type: "post",
            success: function (result) {
                ShowFenYe();
            }
        });
    }
    function Update(ID) {
        location.href = 'http://localhost:52837/Log/Update?ID=' + ID + '';
    };
</script>
原文地址:https://www.cnblogs.com/GuoLianSheng/p/13261189.html