注: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
{
}

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

nop前端分页实现思路及步骤的更多相关文章

  1. js实现前端分页页码管理

    用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...

  2. 基于vue2.0实现仿百度前端分页效果(二)

    前言 上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图 代码实现 按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路 1.需要提前 ...

  3. jQuery插件实例六:jQuery 前端分页

    先来看看效果: 对于前端分页,关键是思路,和分页算法.本想多说两句,可又觉得没什么可说的,看代码吧: 如何使用? $("#pging").zPagination({ 'navEve ...

  4. Jquery前端分页插件pagination同步加载和异步加载

    上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...

  5. vue+element实现分页--之--前端分页

    效果图: 访问的数据量小,一次返回所有数据,再次利用elementUI-Table 和el-pagination组件进行展示,关键点事数据的筛选 官网的完整案例 <div class=" ...

  6. js前端分页之jQuery

    锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...

  7. Extjs中grid前端分页使用PagingMemoryProxy【二】

        在项目中遇到Grid前端分页,本人也是刚接触extjs没多久,为了实现效果,一直找了很久才实现出来,对于代码中的一些也不能详细的说明出来, 不知道能不能帮助到遇到同样问题的朋友,所以将例子代码 ...

  8. 分享非常好用的前端分页js工具类 灵活 简单易懂

    分享自己封装的前端分页js工具类  下面是默认样式效果截图 可以随意更改js及css 很灵活 /** * pageSize, 每页显示数 * pageIndex, 当前页数 * pageCount 总 ...

  9. Handsontable的前端分页与数据库分页

    Handsontable虽然处理速度很快,但当数据量达到10W+的时候很容易导致浏览器内存泄漏,这时候可以用分页来解决.官网提供了前端分页demo,测试后发现也只能处理低于10W的数据,而且调试的时候 ...

随机推荐

  1. 根据UI找对应的j s 脚本

    1.页面内容的脚本 2.页面外部脚本 3.根据UI找j s 脚本

  2. 第2条:遵循PEP8风格指南

    <Python Enhancement Proposal #8>(8号Python增强提案)又叫PEP8,它是针对Python代码格式而编订的风格指南. 尽管可以在保证语法正确的前提下随意 ...

  3. PHP数组各种操作与函数汇总

    对于Web编程来说,最重要的就是存取和读写数据了.存储方式可能有很多种,可以是字符串.数组.文件的形式等.数组,可以说是PHP的数据应用中较重要的一种方式.PHP的数组函数众多,下面是我学习的小结,借 ...

  4. PAT 天梯赛 L2-007. 家庭房产 【并查集】

    题目链接 https://www.patest.cn/contests/gplt/L2-007 思路 将一个家庭里的所有人都并进去 然后最后查找的时候 找到所有同一个家庭的人,计算出人数,人均房产套数 ...

  5. 事务的四大特性ACID

    ACID是指数据库事务的四大特性,是由Jim Gray在19世纪70年代后期提出的概念,1983年Andreas Reuter and Theo Härder创造了ACID这个缩略语用来描述这四大特性 ...

  6. IE盒模型和标准盒模型

    标准盒模型和ie盒模型(怪异盒模型) w3c标准盒模型 width和height不包括padding和border ie盒模型 width和height包含padding和border ie8以上都是 ...

  7. 【leetcode刷题笔记】Unique Binary Search Trees II

    Given n, generate all structurally unique BST's (binary search trees) that store values 1...n. For e ...

  8. echo 命令参数

    echo 命令参数: -n 不换行输出 -e 解析转义字符(\n \t \b \r)

  9. 算法(Algorithms)第4版 练习 2.2.11(1)

    实现关键代码: private static void sort(Comparable[] input, int lo, int hi) { if((lo+CUTOFF-1) >= hi) { ...

  10. SQL truncate 、delete与drop区别及 MSSQL、MySQL 数据库删除大批量千万级百万级数据的优化

    C#_Stopwatch 类 http://www.cnblogs.com/zhw511006/archive/2009/07/22/1528405.html http://blog.csdn.net ...