nop前端分页实现思路及步骤

时间:2023-03-10 05:40:53
nop前端分页实现思路及步骤

注:nop本身已经有啦可以实现分页的类,所以我们直接去使用就可以啦 。

(编程部分)步骤如下:

第一步,针对Model操作,在需要使用分页的界面Model中将分页类作为该Model类的成员,并在Modle的构造函数中实例化。代码如下:

public class NeedMessagePagerModel : BaseNopModel
{
public NeedMessagePagerModel()
{
PagingFilteringContext = new NewsPagingFilteringModel(); } public NewsPagingFilteringModel PagingFilteringContext { get; set; } }
//NeedMessagePagerModel 为界面Model

第二步,针对控制器操作,方法需要参数,代码如下:

public ActionResult NewSchoolMessage(NewsPagingFilteringModel command)
{
DxcMessagePagerModel modelList = new DxcMessagePagerModel();
if (command.PageSize <= ) command.PageSize = ;
if (command.PageNumber <= ) command.PageNumber = ;
//entitys为从数据库中查询出的数据,并判断是否为空,不为空是进行分页操作
if(entitys==null){
return view();
} var page = new PagedList<实体Model>(entitys, command.PageNumber - , command.PageSize);
modelList.PagingFilteringContext.LoadPagedList(page); modelList.BaseMessagesItems = page.Select(x =>//BaseMessagesItems为在BaseMessageModel中自定义的并实例化的容器装所需数据的容器
{
BaseMessageModel model = new BaseMessageModel();
model.Id = x.Id;
model.Title = x.Title;
model.PictureUrl = x.Picture == null ? "" : _pictureService.GetPictureUrl((int)x.Picture); return model;
}).ToList(); return View(modelList);
}
//BaseMessageModel为另一个视图Model

第三步,针对视图端的操作,代码如下:

@{
var pager = Html.Pager(Model.PagingFilteringContext).QueryParam("pagenumber");
}
@if (!pager.IsEmpty())
{
<div class="pager">
@pager
</div>
}

以下为:实现原理的版本(单独系统开发时可以根据步骤加入使用)

第一步,接口定义,代码如下:

public interface IPageableModel
{
/// <summary>
/// The current page index (starts from 0)
/// </summary>
int PageIndex { get; }
/// <summary>
/// The current page number (starts from 1)
/// </summary>
int PageNumber { get; }
/// <summary>
/// The number of items in each page.
/// </summary>
int PageSize { get; }
/// <summary>
/// The total number of items.
/// </summary>
int TotalItems { get; }
/// <summary>
/// The total number of pages.
/// </summary>
int TotalPages { get; }
/// <summary>
/// The index of the first item in the page.
/// </summary>
int FirstItem { get; }
/// <summary>
/// The index of the last item in the page.
/// </summary>
int LastItem { get; }
/// <summary>
/// Whether there are pages before the current page.
/// </summary>
bool HasPreviousPage { get; }
/// <summary>
/// Whether there are pages after the current page.
/// </summary>
bool HasNextPage { get; }
}

第二步,实现继承,代码如下:

public abstract class BasePageableModel : IPageableModel
{
#region Methods public virtual void LoadPagedList<T>(IPagedList<T> pagedList)
{
FirstItem = (pagedList.PageIndex * pagedList.PageSize) + ;
HasNextPage = pagedList.HasNextPage;
HasPreviousPage = pagedList.HasPreviousPage;
LastItem = Math.Min(pagedList.TotalCount, ((pagedList.PageIndex * pagedList.PageSize) + pagedList.PageSize));
PageNumber = pagedList.PageIndex + ;
PageSize = pagedList.PageSize;
TotalItems = pagedList.TotalCount;
TotalPages = pagedList.TotalPages;
} #endregion #region Properties public int FirstItem { get; set; } public bool HasNextPage { get; set; } public bool HasPreviousPage { get; set; } public int LastItem { get; set; } public int PageIndex
{
get
{
if (PageNumber > )
return PageNumber - ; return ;
}
} public int PageNumber { get; set; } public int PageSize { get; set; } public int TotalItems { get; set; } public int TotalPages { get; set; } #endregion
}

第三步,继承抽象方法可以不实现从而直接使用父类的方法,(抽象方法不能实例化)。代码如下:

public partial class NewsPagingFilteringModel : BasePageableModel
{
}

最后步骤:通上述编程部分的步骤一,二,三。