欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

MvcPager分页控件使用注意事项

程序员文章站 2023-11-14 14:14:40
初学mvc,做了个单页面应用,需要显示多个分页,并无刷新更新。 找到了mvcpager控件,非常好用,在使用ajax过程中遇到很多问题。慢慢调试和杨老师(mvcpaegr...

初学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就行了。

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