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.吐槽一下我现在的电脑,真卡,等工作了一定先换个电脑,╭(╯^╰)╮


  • 相关阅读:
    Kafka事务机制
    RabbitMQ事务机制
    RocketMQ事务消息
    No 'Access-Control-Allow-Origin' header is present on the requested resource.'Ajax跨域访问解决方案
    java + eclipse 工作环境快速配置
    查找.bashrc文件并设置linux快捷命令
    headers参数传值类型
    无需会员将有道云笔记脑图转换xmind
    使用goland调试远程代码
    nginx配置文件使用环境变量
  • 原文地址:https://www.cnblogs.com/MartinLee/p/7622710.html
Copyright © 2011-2022 走看看