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
{
}
最后步骤:通上述编程部分的步骤一,二,三。
nop前端分页实现思路及步骤的更多相关文章
- js实现前端分页页码管理
用JS实现前端分页页码管理,可以很美观的区分页码显示(这也是参考大多数网站的分页页码展示),能够有很好的用户体验,这也是有业务需要就写了一下,还是新手,经验不足,欢迎指出批评! 首先先看效果图: 这是 ...
- 基于vue2.0实现仿百度前端分页效果(二)
前言 上篇文章中,已经使用vue实现前端分页效果,这篇文章我们单独将分页抽离出来实现一个分页组件 先看实现效果图 代码实现 按照惯例,我们在冻手实现的时候还是先想一想vue实现组件的思路 1.需要提前 ...
- jQuery插件实例六:jQuery 前端分页
先来看看效果: 对于前端分页,关键是思路,和分页算法.本想多说两句,可又觉得没什么可说的,看代码吧: 如何使用? $("#pging").zPagination({ 'navEve ...
- Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
- vue+element实现分页--之--前端分页
效果图: 访问的数据量小,一次返回所有数据,再次利用elementUI-Table 和el-pagination组件进行展示,关键点事数据的筛选 官网的完整案例 <div class=" ...
- js前端分页之jQuery
锋利的js前端分页之jQuery 大家在作分页时,多数是在后台返回一个导航条的html字符串,其实在前端用js也很好实现. 调用pager方法,输入参数,会返回一个导航条的html字符串.方法的内部比 ...
- Extjs中grid前端分页使用PagingMemoryProxy【二】
在项目中遇到Grid前端分页,本人也是刚接触extjs没多久,为了实现效果,一直找了很久才实现出来,对于代码中的一些也不能详细的说明出来, 不知道能不能帮助到遇到同样问题的朋友,所以将例子代码 ...
- 分享非常好用的前端分页js工具类 灵活 简单易懂
分享自己封装的前端分页js工具类 下面是默认样式效果截图 可以随意更改js及css 很灵活 /** * pageSize, 每页显示数 * pageIndex, 当前页数 * pageCount 总 ...
- Handsontable的前端分页与数据库分页
Handsontable虽然处理速度很快,但当数据量达到10W+的时候很容易导致浏览器内存泄漏,这时候可以用分页来解决.官网提供了前端分页demo,测试后发现也只能处理低于10W的数据,而且调试的时候 ...
随机推荐
- 《程序员代码面试指南》第一章 栈和队列 设计一个有getMin功能的栈
题目 实现一个特殊的栈,在实现栈的基本功能上,再实现返回栈中最小的元素的操作 要求 1. pop.push.getMin操作时间复杂度都是O(1) 2. 设计的栈类型可以使用现成的栈结构 java代码 ...
- python 3 面向过程编程
python 3 面向过程编程 核心是过程(流水线式思维),过程即解决问题的步骤,面向过程的设计就像设计好一条工业流水线,是一种机械式的思维方式. 1.优点:程序结构清晰,可以把复杂的问题简单化,流程 ...
- HDU 之 City Game
City Game Time Lim ...
- HDU 4001 To Miss Our Children Time(2011年大连网络赛 A 贪心+dp)
开始还觉得是贪心呢... 给你三类积木叫你叠楼房,给你的每个积木包括四个值:长 宽(可以互换) 高 类型d d=0:你只能把它放在地上或者放在 长 宽 小于等于 自己的积木上面 d=1:你只能把它放在 ...
- 转战github了
现在已经改在github写博客了,地址为http://connorzhangxu.github.io/ 博客园用了几年,总体感觉不错,但是对公式的支持整体不是很好,所以后来自己搭建了github博客, ...
- spring boot: scope (一般注入说明(一) @Autowired注解)
实例一: DiConfig 文件: package di; import org.springframework.context.annotation.ComponentScan; import or ...
- ava:Map借口及其子类HashMap三
ava:Map借口及其子类HashMap三 HashMap常用子类(异步非安全线程,性能高: Hashtable:同步的安全线程,性能低) map(HashMap)中的key,value可以通过 Se ...
- Spring Boot -- actuator
Spring Boot有四大神器,分别是auto-configuration.starters.cli.actuator,本文主要讲actuator.actuator是spring boot提供的对应 ...
- 详细的.Net并行编程高级教程--Parallel
一直觉得自己对并发了解不够深入,特别是看了<代码整洁之道>觉得自己有必要好好学学并发编程,因为性能也是衡量代码整洁的一大标准.而且在<失控>这本书中也多次提到并发,不管是计算机 ...
- PHP中怎样让数组以字母为键值来递增
//小写字母 $key = 97; $arr = array(); for($i=1;$i<=26;$i++){ $arr[chr($key)] = $i; $key++; } print_r( ...