使用JavaScript创建我的分页

把下面的方法放到一个js文件，页面引用他就行了

JavaScript

function PageList(PageSize, PageIndex, TotalCount, ParList) {
    $("#Page").html();
    var PageSize = parseInt(PageSize);
    var PageIndex = parseInt(PageIndex);
    var TotalCount = parseInt(TotalCount);
    if (TotalCount > 0) {
        var top = 0;
        var end = 0;
        var d = TotalCount / PageSize;
        var count = Math.ceil(d);
        top = PageIndex - 4;
        if (top <= 0) {
            top = 1;
        }
        end = top + 6;
        if (end > count) {
            end = count;
        }
        var strUrl = "";
        if (parseInt(PageIndex - 1) == 0) {
            strUrl += "<li><a class='w55 cur' id='top' style='cursor:default' onclick='' href='javascript:;'><</a></li>";
        } else {
            strUrl += "<li><a class='w55 cur' id='top' style='cursor:default' onclick='" + ParList + "(" + parseInt(PageIndex - 1) + ")' href='javascript:;'><</a></li>";
        }
        for (var i = top; i <= end; i++) {
            if (i == PageIndex) {
                strUrl += "<li class='active'><a href='JavaScript:Void(0)'" + ">" + i + "</a></li>";
            }
            else {
                strUrl += "<li><a href='JavaScript:Void(0)' style='cursor:pointer;' onclick='" + ParList + "(" + i + ")'>" + i + "</a></li>";
            }
        }
        strUrl += "<li><a class='w55 cur' id='end' style='cursor:default' onclick='' href='javascript:;'>></a></li>";
        strUrl += "<li><a>共" + TotalCount + "条记录</a></li>";
        $("#Page").html(strUrl);
        if (PageIndex != 1) {
            $("#top").attr("class", "w55")
            $("#top").attr("style", "")
        }
        if (PageIndex != end) {
            $("#end").attr("class", "w55")
            $("#end").attr("style", "")
            $("#end").attr("onclick", "" + ParList + "(" + parseInt(parseInt(PageIndex) + parseInt(1)) + ")");
        }
    } else {
        $("#Page").html("");
    }
}

　　

PageSize  每页显示多少条

PageIndex 当前的页码

TotalCount 一共有多少条记录

ParList 分页方法

C# MVC中调用这个js方法

PageList("@Model.PageSize", "@Model.PageIndex", "@Model.TotalCount", "ParList")

Ajax

这个ajax方法的名字就是，第四个参数

    function ParList(data) {
        $("#Wu").remove();
        $.ajax({
            url: "/ActivityAndProduct/ActivityList?PageIndex=" + data,
            type: "post",
            data: {
                Name: $("#Name").val(),
                type: $("#static option:selected").val()
            },
            success: function (data) {
                $("#divList").html(data);
            }
        });
    }

　　

HTML(主视图)

<table class="table table-hover table-bordered" style="margin-top: 20px;">
    <tbody id="divList">

    </tbody>
</table>
<div style="margin-top: 10px;">
    <div style="text-align: center;">
        <nav>
            <ul class="pagination" id="Page">

            </ul>
        </nav>
    </div>
</div>

　　

(部分视图)

@if (Model.Count > 0)
{
    <tr>
        <th>活动和产品ID</th>
        <th>活动和产品名称</th>
        <th>创建时间</th>
        <th>最后编辑时间</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    foreach (var item in Model.Model)
    {
    <tr>
        <td>@item.ID</td>
        <td>@item.Name</td>
        <td>@item.CreateTime</td>
        <td>@item.EditTime</td>
        <td id="@item.ID">
            @if (item.Static == 0)
            {
                <ii>下架</ii>
            }
            @if (item.Static == 1)
            {
                <ii>上架</ii>
            }
        </td>
        <td>
            <a>编辑</a>
            <a>删除</a>
        </td>
    </tr>
    }
    <script src="~/Scripts/Page.js"></script>
    <script type="text/javascript">
        $(function () {
            PageList("@Model.PageSize", "@Model.PageIndex", "@Model.TotalCount", "ParList")
        })
    </script>
}

　　

通过Ajax调用后台的方法

后台的方法会返回部分视图

再通过js把返回回来的部分视图替换了

这个分页的方法中

搜索和分页可以都用这个方法

调用第一页就行了

ParList(1);