MvcPager分页控件使用注意事项

2024-10-28 07:39:27

初学MVC，做了个单页面应用，需要显示多个分页，并无刷新更新。

找到了MvcPager控件，非常好用，在使用ajax过程中遇到很多问题。慢慢调试和杨老师（MvcPaegr作者）请教，总于都解决了。

首先NuGet包添加上。搜索MvcPager可以找到。

控制器端必须引用

using Webdiyer.WebControls.Mvc;

后端就不多记录了，看下官方Demo差不多都理解了，主要记录下前端。

 <div>
  @Ajax.Pager(Model, new PagerOptions
 {
  ShowFirstLast = false,//显示第一页按钮
  ShowPrevNext = false,//显示最后一页按钮
  NumericPagerItemCount = 5,//最多显示页码数
  PageIndexParameterName = "page",//传递给后端的分页参数，如果同页有多个分页，这个参数必须不同
  Id = "callajax",//分页控件的ID，给内容修改后需要刷新页面使用。
  ContainerTagName = "ul",
  CssClass = "pagination",
  CurrentPagerItemTemplate = "<li class=\"active\"><a href=\"#\">{0}</a></li>",
  DisabledPagerItemTemplate = "<li class=\"disabled\"><a>{0}</a></li>",
  PagerItemTemplate = "<li>{0}</li>"
 },
 new MvcAjaxOptions { UpdateTargetId = "calllogpage",EnableHistorySupport = false })
 </div>

然后在需要执行后刷新分页控件的地方加入，如果添加或者删除后执行

Webdiyer.MvcPagers.getById("callajax").ajaxReload();//这里面的ID是分页控件指定的ID

重要。使用上面的方法需要在MvcPager.js的jQuery插件中增加一个方法

ajaxReload:function(){
  var context = this;
  context.allowReload = true;
  context.allowCache=false;
  var index = context.__getPageIndex(context.pageIndexName);
  context.__ajax(index===0?1:index, { type: this.httpMethod, data: [] });
 },

重要，将MvcPager.js修改后就不能使用MvcPager的JS脚本注册方法了。

直接引用MvcPager.js就行了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

MVC分页之MvcPager使用详解

最近刚刚接触MVC不久,因项目中要用到分页,网上找了下资料,最后采用了MvcPager(http://www.webdiyer.com/),支持同步和Ajax异步分页.废话不多说了直接上代码. 一.MvcPager异步 ViewModel: public class Article { [Display(Name = "信息编号")] public int ID { get; set; } [Display(Name = "信息标题")] public strin
bootstrap table 服务器端分页例子分享

1,前台引入所需的js 可以从官网上下载复制代码代码如下: function getTab(){ var url = contextPath+'/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm'; $('#tab').bootstrapTable({ method: 'get', //这里要设置为get,不知道为什么设置post获取不了 url: url, cache: false, height: 400, striped: tru
MvcPager分页控件适用于Bootstrap

软件开发分页效果必不可少,对于Asp.Net MVC 而言,MvcPager 是个不错的选择. 请访问http://www.webdiyer.com/mvcpager/ 由于自带的分页样式不能和项目整体风格兼容,所以我们准备改写源代码,使其能够使用Bootstrap 的分页样式. 先来查看两种分页的html代码 Bootstrap 样式: <ul class="pagination"> <li class="disabled"><a h
Angular.js与Bootstrap相结合实现表格分页代码

先给大家简单介绍angular.js和bootstrap基本概念. AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过指令扩展了 HTML,且通过表达式绑定数据到 HTML. Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 最近一直学习Angular.js,在学习过程
完美实现bootstrap分页查询

最近,开始我们的Java项目,要求尽量使用bootstrap,因为它比easyUI要好看的多.然后就开始上网查,边查边做,虽然我们引入了一些bootstrap的样式,但是并没有js代码,所有的功能都需要自己用js做.其实并不难,只要我们明白分页的实质就行.说了这么多,就让我们看看分页查询的表格是怎么做出来的吧. 先上效果图: 1.引入的css样式我们需要引入bootstrap自带的表格样式,这样比较好看,如果再需要修改的话,我们就在其基础上再改. <link rel="styleshee
Bootstrap table分页问题汇总

首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务器端取不到form值,querystring没有问题, 但是request.form取不到值解决:这是ajax的问题,原代码使用原生的ajax. 1可以用读流文件解决.2 如果想用request.form 方式,设置 contentType: "application/x-www-form-
BootStrap mvcpager分页样式(get请求,刷新页面)

使用方法: 先把mvcpager.dll引用加入mvc项目中. 前台代码前台: @{ Layout = null; } @using Webdiyer.WebControls.Mvc @model PagedList<string> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <
第一次动手实现bootstrap table分页效果

先上图吧,这就是bootstrap table分页效果图上代码(这一部分是工具栏的,还包括slider滑动条) <div class="box-body"> <div class="row"> <div class="form-group col-xs-3" style="width: 432px;"> <label for="SendUser" class=&q
ASP.NET同步分页MvcPager使用详解

最近接触了一下MvcPager,来做个笔记吧其实,我喜欢前后端分离,分页这种东西前端负责的地方,后端不用顾问,这里的MvcPager有点让我想起服务器控件,毕竟用到了HtmlHelper. 但是挺方便的..以前我们写分页,后端会封装一Page<T>类,现在我们可以用MvcPager给我们提供好的PageList<T>,功能有点类似,不过MvcPager的功能要强大. 一.使用MvcPager这个控件,需要以下支持 1.后端MvcPager.dll引用: 2.前端需要Css:pag
Bootstrap Paginator分页插件使用方法详解

最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体的网站后台风格便能够统一,又不用自己去写一套分页的功能. 首先便是要下载Bootstrap Paginator了,下载地址:Bootstrap Paginator分页插件首先视图的上面应该需要引入js和css文件,主要有三个文件,分别是bootstrap的css,jquery以及Paginator

MvcPager分页控件使用注意事项

相关推荐

随机推荐