zoukankan      html  css  js  c++  java
  • 【.NET MVC分页】.NET MVC 使用pagelist 分页

    1.安装

    2.

    在NuGet程序包管理控制台 ,输入Install-Package PagedList.mvc 安装PagedList 和PageList.Mvc;

    3.

    @{
        Layout = null;
    }
    @model PagedList.IPagedList<WebCMS.Model.Admin>
    <!DOCTYPE html>
    
    <html>
    
    <head>
        <meta http-equiv="Content-Language" content="zh-cn" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <meta name="author" content="Fhua" />
        <meta name="Copyright" content="BLIT" />
        <meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0,initial-scale=1.0,user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>账号管理</title>
        <link href="/Content/layui/css/layui.css" rel="stylesheet" />
        <link href="/Content/fhuaui/css/fhuaui.css" rel="stylesheet" />
        <link href="/Content/Font-Awesome/css/font-awesome.css" rel="stylesheet" />
        <script src="/Content/layui/layui.js"></script>
    </head>
    
    <body>
        <div class="main-wrap">
            <blockquote class="layui-elem-quote fhui-admin-main_hd">
                <h2>账号管理</h2>
            </blockquote>
            <blockquote class="layui-elem-quote fhuaui-tip">
                1.默认不显示当前登录用户信息,只可查询当前登录账户建立的用户信息<br /> 2.每个账号必须绑定手机号和邮箱,不然无法找回
            </blockquote>
            <div class="y-role">
                <!--工具栏-->
                <div id="floatHead" class="toolbar-wrap">
                    <div class="toolbar">
                        <div class="box-wrap">
                            <div class="l-list clearfix">
                                <form id="tt" class="layui-form layui-form-pane">
                                    <div class="layui-form-item">
                                        <div class="layui-inline">
                                            <div class="layui-input-block" style="margin-left: 0px">
                                                <input id="skey" name="skey" value="" autocomplete="off" placeholder="请输入关键字" class="layui-input" type="text" />
                                            </div>
                                        </div>
                                        <div class="layui-inline">
                                            <a class="layui-btn layui-btn-small" lay-submit="" lay-filter="cx" data-href="/UserManager/Account" data-ajaxhref="/RegCom/Search"><i class="fa fa-search"></i>查询</a>
                                            <a class="layui-btn layui-btn-small do-action" data-type="doAdd" data-href="/UserManager/UserModify?type=Add"><i class="fa fa-plus"></i>新增</a>
                                            <a class="layui-btn layui-btn-small do-action" data-type="doAction" data-href="/UserManager/ResetPsw"><i class="fa fa-edit"></i>初始化密码</a>
                                            <a class="layui-btn layui-btn-small do-action" data-type="doAction" data-href="/UserManager/LockUser"><i class="fa fa-lock"></i>锁定</a>
                                            <a class="layui-btn layui-btn-small do-action" data-type="doAction" data-href="/UserManager/UnlockUser"><i class="fa fa-unlock"></i>解锁</a>
                                            <a class="layui-btn layui-btn-small do-action" data-type="doDelete" data-href="/UserManager/DelUser"><i class="fa fa-trash-o"></i>删除</a>
                                            <a class="layui-btn layui-btn-small do-action" data-type="doRefresh" data-href="/UserManager/AdminAccount"><i class="fa fa-refresh"></i>重新载入</a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/工具栏-->
                <!--文字列表-->
                <div class="fhui-admin-table-container">
                    <form action="/UserManager/Account" class="form-horizontal" id="formrec" method="post" role="form">
                        <table class="layui-table" lay-skin="line">
                            <colgroup>
                                <col width="50">
                                <col width="50">
                                <col width="90">
                                <col width="120">
                                <col width="100">
                                <col width="120">
                                <col width="65">
                                <col width="65">
                                <col width="65">
                                <col width="65">
                                <col width="65">
                                <col>
                                <col width="95">
                            </colgroup>
                            <thead>
                                <tr>
                                    <th>
                                        <input type="checkbox" id="selected-all" />
                                    </th>
                                    <th></th>
                                    <th>AdminID</th>
                                    <th>账号名称</th>
                                    <th>账号状态</th>
                                    <th>头像</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach (var ad in Model)
                                {
                                    <tr>
                                        <td>
                                            <input id="ck" ids="+@ad.AdminID+" name="ck" type="checkbox" value="true" />
                                            <input name="ck" type="hidden" value="false" />
                                        </td>
                                        <td></td>
                                        <td>@ad.AdminID</td>
                                        <td>@ad.AdminName</td>
                                        <td>@ad.AdminState</td>
                                        <td>@ad.Head_Thumb</td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </form>
                </div>
                <!--/文字列表-->
                <!--分页-->
                <div class="fhui-admin-pagelist">
                    <div id="page">
                    </div>
                </div>
            </div>
        </div>
        <script src="/Content/myjs/global.js"></script>
        <script src="/Content/myjs/list.js"></script>
        <script>
    			layui.use(['layer', 'laypage', 'common', 'form'], function() {
    				var $ = layui.jquery,
    					layer = layui.layer,
    					laypage = layui.laypage,
    					common = layui.common,
    					form = layui.form();
    				//分页
    				laypage({
    					cont: 'page',
    					pages: @Model.PageCount, //获取总页数
    					curr: function() { //通过url获取当前页,也可以同上(pages)方式获取
    						var page = location.search.match(/page=(d+)/);
    						return page ? page[1] : 1;
    					}(),
    					jump: function(e, first) { //触发分页后的回调
    						if(!first) { //一定要加此判断,否则初始时会无限刷新
    							location.href = '?page=' + e.curr;
    						}
    					},
    					skin: true //颜色'#1E9FFF'
    				});
    				//监听查询
    				form.on('submit(cx)', function(data) {
    					var url = $(this).data('href');
    					var ajaxurl = $(this).data('ajaxhref');
    					if(ajaxurl) {
    						$.post(ajaxurl, { url: url, keywords: data.field.skey },
    							function(result, status) {
    								if(result.state) {
    									window.location.href = result.data;
    								}
    							}, "json");
    					} else {
    						common.layerError('提交链接错误!', '提示');
    					}
    					return false;
    				});
    			});
        </script>
    </body>
    </html>


    4. control里面是
    引用=》using PagedList;
     /// <summary>
            /// 管理员账号
            /// </summary>
            /// <returns></returns>
            //int AdminID = Convert.ToInt32(Session["AdminID"]);
            //List<Admin> list = new AdminManager().getAdminInfo(AdminID);
            //ViewData["showAdmin"] = list;
            public ActionResult AdminAccount( int page=1)
            {
                const int pageSize = 2;
                int AdminID = Convert.ToInt32(Session["AdminID"]);
                List<Admin> list = new AdminManager().getAdminInfo();
                if(list == null)
                {
                    return HttpNotFound();
                }
                //ViewData["showAdmin"] = list;
                var iUser = list.ToPagedList(page, pageSize);
                //ViewData["showSystemLog"] = list;
                return View(iUser);
            }

    5.

    每页 @Model.PageSize.ToString()  条记录,共有 @Model.TotalItemCount.ToString() 条记录。第 @(ViewBag.TotalRecords == 0 ? 0 : Model.PageNumber) 页,共 @Model.PageCount 页。   或者  

     每页 @Model.PageSize 条记录,共有 @Model.TotalItemCount 条记录。第 @(Model.PageCount < Model.PageNumber ? 0 :Model.PageNumber) 页,共 @Model.PageCount 页。

    这个条件表达式的目的是防止出现 记录为0的情况,会出现 总页数为0,而当前是第1页的情况。

    //PagedList.MVC中 IPagedList类型自带的有分页中用到的参数如:集合总记录数、每页最大记录数。

    @Model.PageSize 指设置的是每页最大记录数,

    @Model.TotalItemCount 总的记录数 ,

    @Model.PageCount 总页数,

     @Model.PageNumber 第几页,

    @Model.Count() 当前页面上包含的记录数。

    @Html.PagedListPager(Model, page => Url.Action("Index",
    new { page, sortOrder = ViewBag.CurrentSort, searchString = ViewBag.SearchString }))  
    
     
    
    Html.PagedListPager(Model,Url,PagedListRenderOptions) 分页辅助方法的  new PagedListRenderOptions() 参数可自定义显示格式,可以
    
    例如:
    
      @Html.PagedListPager(Model, page => Url.Action("Index", new { page }), new PagedListRenderOptions() { LinkToFirstPageFormat = "首页", LinkToNextPageFormat = "下一页", LinkToPreviousPageFormat = "上一页", LinkToLastPageFormat = "末页", DisplayItemSliceAndTotal = false, MaximumPageNumbersToDisplay = 3 })  
    这一段来与 http://www.cnblogs.com/liuyuanhao/p/4943940.html

    6.吐槽一下我现在的电脑,真卡,等工作了一定先换个电脑,╭(╯^╰)╮


  • 相关阅读:
    MVC模式-----struts2框架(2)
    MVC模式-----struts2框架
    html的<h>标签
    jsp脚本元素
    LeetCode "Paint House"
    LeetCode "Longest Substring with At Most Two Distinct Characters"
    LeetCode "Graph Valid Tree"
    LeetCode "Shortest Word Distance"
    LeetCode "Verify Preorder Sequence in Binary Search Tree"
    LeetCode "Binary Tree Upside Down"
  • 原文地址:https://www.cnblogs.com/MartinLee/p/7622710.html
Copyright © 2011-2022 走看看