首页 > 代码库 > Js_分页

Js_分页

 public ActionResult Index(int? pageIndex)
        {
            List<string> data = http://www.mamicode.com/new List<string>();
            for (int i = 0; i < 103; i++)
            {
                data.Add((i * 2).ToString());
            }
            PagedList<string> pagedList = new PagedList<string>(data.AsQueryable(), pageIndex, 5);
            return View("Index", "_Layout", pagedList);
        }

        public PartialViewResult IndexPartial(int? pageIndex)
        {
            List<string> data = http://www.mamicode.com/new List<string>();
            for (int i = 0; i < 103; i++)
            {
                data.Add((i * 2).ToString());
            }

            PagedList<string> pagedList = new PagedList<string>(data.AsQueryable(), pageIndex, 5);
            return PartialView("Index", pagedList);
        }

 

Index

@model PagedList<string>
@{
    Layout = null; 
}
@RenderPage("../Shared/_pagerView.cshtml")
@foreach (var item in Model)
{
    @item<br />
    <br />
}
@RenderPage("../Shared/_pagerView.cshtml")

pagerView

<style type="text/css">
    /*= 分页页号样式 =*/
    .pagination
    {
        margin-bottom: 10px;
        line-height: 23px;
    }
    .pagination-inner
    {
        float: right;
    }
    .pagination a, .pagination span
    {
        float: left;
        display: inline;
        margin-left: 3px;
        padding: 0 7px;
        border: 1px solid #a2d0e5;
        background-color: #fff;
        white-space: nowrap;
    }
    .pagination a:link, .pagination a:visited
    {
        color: #017ca9;
        text-decoration: none;
    }
    .pagination a:hover, .pagination a:active
    {
        border-color: #1db535;
        text-decoration: none;
    }
    .pagination .current, .pagination a.current:link, .pagination a.current:visited
    {
        color: #fff;
        border-color: #1db535;
        background: #57d26a;
        font-weight: bold;
    }
</style>
<div class="clearfix pagination">
    <div class="pagination-inner">
        @if (Model.Start > 1)
        {
            <a href="javascript:void(0);" pageindex="1">1...</a>
        }
        @for (int i = Model.Start; i <= Model.End; i++)
        {
            <a href="javascript:void(0);" pageindex="@i">@i</a>
        }
        @if (Model.End < Model.TotalPages && Model.PageIndex - Model.Start < 3)
        {
            string totalPages = (Model.TotalPages).ToString();
            <a href="javascript:void(0);" pageindex="@totalPages">...@(totalPages)</a>
        }
    </div>
</div>
<script type="text/javascript">
    $(document).ready(
        $("a").click(function () {
            var p = $(this).attr("pageindex");
            $.post("Home/IndexPartial", { pageIndex: p }, function (data) {
                $("#main").html(data);
            });
        })
    )
</script>

 

Controller