.Net Core MVC 基于Layui Taghelper 自定义分页

2021-03-04 20:27

阅读:453

标签:dex   setattr   blog   html   需要   按钮   nbsp   span   asn   

防真伪链接:https://www.cnblogs.com/wen593692967

分页在项目中是必不可少的,最近前端使用Layui框架,看了下Layui官网分页的案例,发现都是异步Ajax分页的方式,想要返回Model分页,看来需要自己动手了,自力更生丰衣足食。

得,话不多说,开始撸码。

 接口:

IPageList

/// 
    /// 分页接口
    /// 
    public interface IPageList : IList
    {
        /// 
        /// 当前页
        /// 
        int PageIndex { get; set; }

        /// 
        /// 页码
        /// 
        int PageSize { get; set; }

        /// 
        /// 总数据量
        /// 
        int ItemCount { get; set; }

        /// 
        /// 总页数
        /// 
        int PageCount { get; }

        /// 
        /// 是否有上一页
        /// 
        bool HasPreViousPage { get; }

        /// 
        /// 是否有下一页
        /// 
        bool HasNextPage { get; }
    }

分页接口实现:

PageList:

 /// 
    /// 分页接口实现
    /// 
    public class PageList : List, IPageList
    {
        public PageList()
        {

        }

        /// 
        /// IQueryable 分页
        /// 
        /// 数据
        /// 当前页
        /// 页码
        public PageList(IQueryable sourceItem, int pageIndex, int pageSize)
        {
            PageIndex = pageIndex 
        /// List 分页
        /// 
        /// 数据
        /// 当前页
        /// 页码

        public PageList(List item, int pageIndex, int pageSize)
        {
            PageIndex = pageIndex 
        /// 当前页
        /// 
        public int PageIndex { get; set; }

        /// 
        /// 页码
        /// 
        public int PageSize { get; set; }

        /// 
        /// 总数据量
        /// 
        public int ItemCount { get; set; }

        /// 
        /// 总页码
        /// 
        public int PageCount
        {
            get
            {
                return ItemCount % PageSize == 0 ? (ItemCount / PageSize) : (ItemCount / PageSize + 1);
            }
        }

        /// 
        /// 是否有上一页
        /// 
        public bool HasPreViousPage => PageIndex > 1;

        /// 
        /// 是否有下一页
        /// 
        public bool HasNextPage => PageIndex 

  控制器:

  Controller:

  技术图片

Taghelper:

/// 
    /// 分页控件
    /// 
    [HtmlTargetElement("pager", TagStructure = TagStructure.WithoutEndTag)]
    public class PagerTagHelper : TagHelper
    {
        private IUrlHelper urlHelper;
        public PagerTagHelper(IUrlHelper _urlHelper)
        {
            urlHelper = _urlHelper;
        }

        /// 
        /// Action
        /// 
        [HtmlAttributeName("asp-action")]
        public string Action { get; set; }

        /// 
        /// Controller
        /// 
        [HtmlAttributeName("asp-controller")]
        public string Controller { get; set; }

        /// 
        /// 分页对象
        /// 
        [HtmlAttributeName("page-model")]
        public dynamic PageModel { get; set; }

        /// 
        /// 生成分页控件
        /// 
        /// 
        /// 
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            //如果没有记录则不显示分页
            if (PageModel.ItemCount           return;
            }
            //between
            int start = PageModel.PageIndex - 5;
            start = start  PageModel.PageCount ? PageModel.PageCount : end;

            output.TagName = "div";
            output.Attributes.SetAttribute("class", "layui-table-page");
            output.Content.AppendHtmlLine($"
"); //拼接分页的Html output.Content.AppendHtmlLine($"
"); //总记录数 output.Content.AppendHtmlLine($"共{PageModel.ItemCount}条,共{PageModel.PageCount}页"); //上一页按钮 if (PageModel.HasPreViousPage) { output.Content.AppendHtmlLine($""); } else { output.Content.AppendHtmlLine($""); } //按钮有序数量 for (int i = start; i "); output.Content.AppendHtmlLine(""); output.Content.AppendHtmlLine($"{i}"); output.Content.AppendHtmlLine(""); } else { output.Content.AppendHtmlLine($"{i}"); } } //是否有下一页按钮 if (PageModel.HasNextPage) { output.Content.AppendHtmlLine($""); } else { output.Content.AppendHtmlLine($""); } output.Content.AppendHtmlLine($"
"); output.Content.AppendHtmlLine($"
"); output.TagMode = TagMode.StartTagAndEndTag; } }

  View页面调用:

技术图片

 

 

 

 

 最终渲染成Html的样子:

技术图片

 

.Net Core MVC 基于Layui Taghelper 自定义分页

标签:dex   setattr   blog   html   需要   按钮   nbsp   span   asn   

原文地址:https://www.cnblogs.com/wen593692967/p/12912105.html


评论


亲,登录后才可以留言!