之前我发表了一篇MVC无刷新分页的文章,里面用的是MvcPager控件,但是那个受那个控件限制,传值只能用PagedList,各方面都受到了限制,自由度不够高,现在还是做MVC无刷新分页,但是想直接用IQueryable或者IEnumerable传值,并且界面简洁化,可定制性也高点。

  既然还是用IQueryable传值,那么Controller就没什么好说了,就是分页的时候返回一个PartialView而已。现在关键是网页的设计和脚本。先说我想达到的效果吧:

  我想达到的效果就是搜索条件和标题占一行,其中标题靠左,搜索条件靠右,添加商品和分页信息占另一行,其中添加商品按钮靠左,分页信息靠右,代码如下:

  其中样式row是bootstrap的样式,left_head和right_head是我用来让他们两个分别浮动在左右的:

  不过这只是样式问题,都不是重点,重点在局部页面_PageInfo:

<div id="pageInfo">
<div><input id="btnPrevPage" class="btn btn-default" type="button" value="上一页" /></div>
<div><input id="btnNextPage" class="btn btn-default" type="button" value="下一页" /></div>
<div><input id="txtPageIndex" name="pageIndex" type="text" class="form-control" /></div>
<div><input id="btnJump" class="btn btn-default" type="button" value="跳转" /></div>
<div id="pageNum"><span id="spanPageIndex"></span><span>/</span><span id="spanTotalPage"></span></div>
</div>

  可以看到分页控件各节点之间是有一定间距的,并且分页数字是靠下的,这些的样式如下:

#txtPageIndex {
width: 43px;
}
#pageInfo > div {
float: left;
margin-right: 2px;
}
#pageNum {
margin-top: 15px;
}

  样子已经做好了,现在就缺关键的脚本了,点了页面跳转可得跳转页面呀,绑定一下事件:

  点了上一页下一页不就跳转一下页面嘛,调用一下Jump函数就可以了:

  至于说其中的ShowWarn警告框是什么呢,这个请参阅我的另一篇文章jQuery弹出提示信息简洁版

  需要说明的是我的局部刷新分页是这样写的:

  表的局部页面IndexPartial的后面得调用脚本刷新一下页数:

  可以看到其中用到了PageContent分页类,这个类在我的另一篇文章通用EF框架里有介绍,这里就不描述了。其中关键的就是调用的刷新页数方法:

function RefreshPage(pageIndex, totalPage) {
if (totalPage < 2) {
$('#pageInfo').hide();
} else {
if (pageIndex == 1) {
$("#btnPrevPage").hide();
$("#btnNextPage").show();
} else {
$("#btnPrevPage").show();
if (pageIndex == totalPage) {
$("#btnNextPage").hide();
} else {
$("#btnNextPage").show();
}
}
$("#spanPageIndex").text(pageIndex);
$("#spanTotalPage").text(totalPage);
$('#txtPageIndex').val(pageIndex);
$('#pageInfo').show();
}
}

  这里我采用当只有一页时把分页控件隐藏掉,如果当前是第一页就把上一页按钮隐藏,如是是最后一页则把下一页按钮隐藏,这个是个人喜好,大家可以随意修改。。

  至此分页控件就写好了。不过在表页跳转时最好还是提示一下正在加载中吧,要不然可能不知道页面跳转了呢,或者等待太久却不知道还在等待呢。这样的话就需要先放个遮罩层:

<div id="loading">
<img src="/Content/img/Imgloading.gif" alt="加载中..." />
</div>

  一开始是要隐藏遮罩层的:

#loading {
background-color: #000;
width: 100%;
height: 100%;
top:;
position: absolute;
z-index:;
filter: alpha(Opacity=60);
-moz-opacity: 0.7;
opacity: 0.7;
display: none;
} #loading img {
position: absolute;
left: 50%;
top: 50%;
margin: -50px;
}

  div的#loading就是一个遮罩层,其中的loading图在遮罩层的中央显示:

  需要图的直接保存上面那个图吧,这样的话,在form提交post的时候把遮罩层拉出来挡一下,获取到数据后又把他撤走就可以了:

function Loading() {
$("#loading").fadeIn();
}
function RemoveLoading() {
$("#loading").hide();
}
$('#formQuery').on('submit', Loading);

MVC自定义分页(附表跳转页Loading提示)的更多相关文章

  1. MVC自定义分页

    MVC自定义分页 之前我发表了一篇MVC无刷新分页的文章,里面用的是MvcPager控件,但是那个受那个控件限制,传值只能用PagedList,各方面都受到了限制,自由度不够高,现在还是做MVC无刷新 ...

  2. mvc自定义分页(加页数的)(转)

    1.引言 在MVC开发中我们经常会对数据进行分页的展示.通过分页我们可以从服务端获取指定的数据来进行展示.这样既节约了数据库查询的时间也节约了网络传输的数据量.在MVC开发中使用的比较多的应该是MVC ...

  3. Mvc自定义分页控件

    MVC开发分页常常使用第三方控件,生成的分页HTML带有版权申明,虽然免费,但是总有的别扭.于是,某日,楼主闲来蛋疼,折腾了个自定义分页控件: 先来展示下效果图: 1>当分页不超过10页的时候, ...

  4. MVC下分页的自定义分页一种实现

    1.引言 在MVC开发中我们经常会对数据进行分页的展示.通过分页我们可以从服务端获取指定的数据来进行展示.这样既节约了数据库查询的时间也节约了网络传输的数据量.在MVC开发中使用的比较多的应该是MVC ...

  5. GridView自定义分页样式(上一页,下一页,到第几页)

    今天要为网站做一个文章列表,发现GridView的分页样式很难看,于是结合网上的例子,自己做了一个.不是很美观,不过还是很实用的,先看下效果吧,如图(1). 图(1)GridView分页效果 自定义G ...

  6. 设置UCHome注册登陆退出的跳转页自定义

    UCHome 默认注册.登录成功后跳转到 http://www.xxx.com/home/space.php?do=home 退出后会跳转到站点的首页,即 http://www.xxx.com/hom ...

  7. asp.net webform 自定义分页控件

    做web开发一直用到分页控件,自己也动手实现了个,使用用户自定义控件. 翻页后数据加载使用委托,将具体实现放在在使用分页控件的页面进行注册. 有图有真相,给个直观的认识: 自定义分页控件前台代码: & ...

  8. 基于存储过程的MVC开源分页控件--LYB.NET.SPPager

    摘要 现在基于ASP.NET MVC的分页控件我想大家都不陌生了,百度一下一大箩筐.其中有不少精品,陕北吴旗娃杨涛大哥做的分页控件MVCPager(http://www.webdiyer.com/)算 ...

  9. asp.net mvc 自定义pager封装与优化

    asp.net mvc 自定义pager封装与优化 Intro 之前做了一个通用的分页组件,但是有些不足,从翻页事件和分页样式都融合在后台代码中,到翻页事件可以自定义,再到翻页和样式都和代码分离, 自 ...

随机推荐

  1. iOS系统验证关闭

    在浏览器上查看iOS系统与否方法:1.打开浏览器2.在地址栏中输入 ipsw.me3.在打开的网页中选择 Select a device 选择你要查看的设备型号:4.选择好设备之后点击select i ...

  2. iOS 企业证书的使用文档

    IN-HOUSE应用程序分发 下面介绍下使用网络方式进行部署的方式,用户直接在iPhone/iPad的Safari浏览器里面输入URL地址即可安装, 注意:目前对于这种企业级开发的应用程序最好的分发方 ...

  3. JQuery UI dialog 弹窗实例及参数说明

    按钮代码: <a id="suprise" style="margin-left: 0.5em;cursor:pointer;">点我会有惊喜< ...

  4. JS中获得当前时间的年月

    //获取完整的日期 var date=new Date; var year=date.getFullYear(); var month=date.getMonth()+1; month =(month ...

  5. CSS 布局

    近日开发中,总感觉页面布局方面力不从心.以前也曾学过这方面的内容,但是不够系统,因此我打算整理一下. 在web 页面中一般有 table 和 css+div 两种布局方式. 其中css+div 又分为 ...

  6. APP产品交互设计分析总结(不断更新中...)

    1.首页中的最下方的TAB和中部的TAB的区别 最下面的tab按钮应该是核心级模块级的大功能入口 中间的按钮应该是次核心级页面级的小功能入口 2.对于编辑是在单页内实现好还是跳转到新页面实现好 内容比 ...

  7. Linux C编程学习之开发工具3---多文件项目管理、Makefile、一个通用的Makefile

    GNU Make简介 大型项目的开发过程中,往往会划分出若干个功能模块,这样可以保证软件的易维护性. 作为项目的组成部分,各个模块不可避免的存在各种联系,如果其中某个模块发生改动,那么其他的模块需要相 ...

  8. 解决select2在bootstrap的modal中默认不显示的问题

    在Bootstrap中的Modal,select2插件会有不显示,因为其z-index小于modal,还有另外一个问题是,修正z-index之后,select2不会自动失去焦点的问题.代码解决如下: ...

  9. ORA-12638:身份证明检索失败

    本地Sqlplus 连一远程数据库,出现 ORA-12638: 身份证明检索失败,pl/sql developer 也是同样的问题,tnsping 是没有问题的. 找到本地的sqlnet.ora文件, ...

  10. WorkFlowHelper

    /* # Microshaoft /r:System.Xaml.dll /r:System.Activities.dll /r:System.Activities.DurableInstancing. ...