MVC 翻页查询

控制器

  public ActionResult YC(string name = "", int pageIndex = 1, int pageSize = 10)
        {
            //上面   pageSize  能改变默认输出的值

            ViewBag.Perform = dd.Perform.ToList();
            //总记录数满足条件
            var counts = dd.Perform.Where(p => p.Name.Contains(name)).Count();
            var totalPage = Math.Ceiling(counts * 1.0 / pageSize);
            //根据页码每页的条数名称查询
            var rows = dd.Perform.Where(p => p.Name.Contains(name))
                .OrderBy(p => p.Id) //排序
                .Skip(pageSize * (pageIndex - 1))  //跳过
                .Take(pageSize) //取值
                .ToList();  //转化为集合  
            ViewBag.pageIndex = pageIndex;
            ViewBag.pageSize = pageSize;
            ViewBag.totalPage = totalPage;
            ViewBag.name = name;
            return View(rows);
        }

页面

<div class="qb_ds">
            <label>名称:</label>
            <input type="text" id="txtCondName" value="@ViewBag.name" />
            <input type="button" value="搜索" id="btnSearch" onclick="page(1)" />
        </div>
        <div class="debf">
            <div class="debf_nr">
                @foreach (var item in Model)
                {
                    <dl>
                        <dt><a href="/Home/YCXQ?Id=@item.Id"><img src="~/img/@item.Img" /></a></dt>
                        <dt class="debf_mz"><a href="/Home/YCXQ?Id=@item.Id">@item.Name</a></dt>
                        <dt class="debf_q"><a href="/Home/YCXQ?Id=@item.Id">@(item.Pj)<span>起</span></a></dt>
                    </dl>
                }
            </div>
        </div>

        <ul class="pagination">
            <li class="pagination_yy">
                共 @ViewBag.totalPage 页，第
                <input type="text" value="@ViewBag.pageIndex" id="pageIndex" style="width:50px;" />
                页，每页显示
                <select id="pageSize" onchange="page(1);">
                    @*pageIndexs里面参数是下拉框的值，可以改变显示多少列*@
                    @{ var pageIndexs = new List<int> { 5, 10 }; }
                    @foreach (var item in pageIndexs)
                    {
                        if (@ViewBag.pageSize == @item)
                        {
                            <option value="@item" selected="selected">@item</option>
                        }
                        else
                        {
                            <option value="@item">@item</option>
                        }
                    }
                </select>
                条
            </li>
            <li><a href="javascript:page(1)">首页</a></li>
            @if (ViewBag.pageIndex > 1)
            {
                <li><a href="javascript:page(@ViewBag.pageIndex-1)">上页</a></li>
            }
            else
            {
                <li class="disabled"><a href="#">上页</a></li>
            }
            <li><a href="javascript:page(@ViewBag.pageIndex+1)">下页</a></li>
            <li><a href="javascript:page(@ViewBag.totalPage)">末页</a></li>
            <li><input type="button" value="到指定页" onclick="go();" class="pagination_an" /></li>
        </ul>

        @*javaScript js代码*@
        @section scripts
    {
            <script type="text/javascript">
                function page(pageIndex) {
                    var pageSize = $("#pageSize").val();
                    var name = $("#txtCondName").val();
                    window.location.href = "/Home/YC?pageIndex=" + pageIndex + "&pageSize=" + pageSize + "&name=" + name;
                }
                function go() {
                    //获取pageIndex
                    var pageindex = $("#pageIndex").val();
                    page(pageindex);
                }
            </script>
        }

CSS

.pagination {
    list-style: none;
}

    .pagination a {
        text-decoration: none;
        color: black;
    }

        .pagination a:hover {
            color: red;
        }

    .pagination li {
        float: left;
        margin: 20px 0px 0px 90px;
    }

.pagination_an {
    width: 80px;
    height: 25px;
    color: black;
    border: none;
    border-radius: 10px;
    background-color: #f8ed89;
}

    .pagination_an:hover {
        background-color: red;
    }


.debf {
    margin-top: 20px;
    width: 100%;
    height: 800px;
}

.debf_nr {
    width: 100%;
    height: 800px;
    overflow: hidden;
}

    .debf_nr img {
        width: 190px;
        height: 280px;
    }

.debf dl {
    width: 190px;
    height: 360px;
    float: left;
    margin: 30px 0px 0px 20px;
}

.debf_mz {
    width: 100%;
    height: 40px;
}

    .debf_mz a {
        color: black;
        text-decoration: none;
    }

.debf_q a {
    color: red;
    font-size: 20px;
    text-decoration: none;
}

.debf_q span {
    color: gray;
    font-size: 15px;
}

#btnSearch {
    width: 80px;
    height: 30px;
    background-color: #a1df97;
    border: none;
    border-radius: 10px;
}

.qb_ds {
    width: 100%;
    height: 40px;
    text-align: center;
    margin-top: 35px;
}