摘要：
MVC中用Jpaginate分页 So easy!（兼容ie家族）看过几款分页插件，觉得Jpaginate比较简约，样式也比较容易的定制，而且体验也比较好，支持鼠标滑动效果。在App_Start文件夹中的BundleConfig.cs中写入：//分页脚本bundles.Add;//分页样式bundles.Add;黄色mark的部分是自己取得名字。早_Layout.cshtml中引用：@Styles.Render@Scripts.Render@Scripts.Render2.在MVC3中，那就直接在_Layout.cshtml中引入即可.二、分页原理分页插件都一般都需要总页数，显示页数。显示的页面用partView，这样配合ajax实现异步翻页。
看过几款分页插件，觉得Jpaginate比较简约，样式也比较容易的定制，而且体验也比较好，支持鼠标滑动效果。先上效果图：
整个过程很简单，只需要3步
一、引入相关样式和脚本：
1.MVC4中，用了Bundles，你可以把同一个类型多个样式或者脚本的捆绑在一起。调用的时候更加简洁，便于管理。这样还可以减少服务器请求，拥有缓存功能等好处。
在App_Start文件夹中的BundleConfig.cs中写入：
//分页脚本 bundles.Add(new ScriptBundle("~/bundles/jPaginate").Include("~/Content/jPaginate/jquery.paginate.js")); //分页样式 bundles.Add(new StyleBundle("~/bundles/jPaginateCss").Include("~/Content/jPaginate/css/style.css"));
黄色mark的部分是自己取得名字。include中才是真正的资源地址。
早_Layout.cshtml中引用：
@Styles.Render("~/bundles/jPaginateCss")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jPaginate")2.在MVC3中，那就直接在_Layout.cshtml中引入即可.
<link href="../../Content/jPaginate/css/style.css"rel="stylesheet"type="text/css" />
<script src="../../Content/jPaginate/jquery.paginate.js"type="text/javascript"></script>
二、分页原理
分页插件都一般都需要总页数，显示页数。还有当前页数，每页显示数目等，这些必须是根据具体的情况，后台去设置。在MVC中，我们设置好一个ViewModel，以Json返回去就行了。显示的页面用partView，这样配合ajax 实现异步翻页。
/// <summary> ///每页显示的条数 /// </summary> private const int DefaultTopicPageCount = 20; /// <summary> ///显示出来的页数 /// </summary> private const int DefaultDisplayCount = 8; /// <summary> ///首页话题列表 /// </summary> /// <returns></returns> public ActionResult TopicList(int? pageIndex=1) { if (pageIndex == 0 || pageIndex == null) pageIndex = 1; var tops = LoveDb.TopicAll().Where(n => n.IsValid).OrderByDescending(n =>n.UpDataTime); var totalcount =tops.Count();// 所有topic的数目 var startIndex = (pageIndex - 1) *DefaultTopicPageCount; //每页起始话题数 var endIndex = (pageIndex) * DefaultTopicPageCount - 1;//每页结束话题数 if (endIndex >= totalcount) endIndex =totalcount; var seletops = tops.Where((t, i) => i >= startIndex && i <=endIndex).ToList();//选出在起始数和结束数之间的topic 也就是当前页要显示的topic foreach (var topic in seletops.Where(topic => topic.Title.Length>18)) { topic.Title = topic.Title.Substring(0, 15) + "..."; } returnPartialView(seletops); } /// <summary> ///分页 抛给前台的数据 /// </summary> /// <returns></returns> publicJsonResult TopicPager() { //需要计算出总的页数 var count= LoveDb.TopicAll().Count(n =>n.IsValid); var page = (int) Math.Ceiling((double)count /DefaultTopicPageCount); var pager = newPager { DisplayCount = page > DefaultDisplayCount ?DefaultDisplayCount : page,//显示页数调整 PageCount =page, ItemCount =DefaultTopicPageCount,//这个可以忽略 StarPage = 1}; returnJson(pager); }
三、前端分页实现
<script type="text/javascript">$(function() { $.post("/Interactive/TopicPager", function(data) { $("#pager").paginate({ count: data.PageCount,//总页数 start: data.StarPage,//起始页 display: data.DisplayCount,//显示的页数 border: true, border_color: '#fff',//自己调整样式。 text_color: 'black', background_color: 'none', border_hover_color: '#ccc', text_hover_color: '#000', background_hover_color: '#fff', images: false, mouse: 'press', onChange: function(page) {//翻页 $.post("/Interactive/TopicList", { pageIndex: page }, function(content) { $("#topiclist").html(content); }); } }); }); }) </script>
这样就就ok了。
其他样式：
下载地址：http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/
如果对你有帮助，就请支持一下~ 
:）