不管是什么类型的网站，分页都是必不可少的功能实现。在这里记录一下我自己接触过的分页控件：
一. MvcPager控件（记得项目里添加MvcPager.dll的引用）
这里面比较常用的就
——@Html.Page()
这里面有很多参数，具体的不一一细说，
，常用的格式是 @Html.Page(数据源，参数设置)，例如：
@Html.Pager(Model, new PagerOptions
{
PageIndexParameterName = "pageIndex",
ShowPageIndexBox = true,
FirstPageText =
"首页",
PrevPageText =
"上一页",
NextPageText =
"下一页",
LastPageText =
"末页"
……
})
注意这里的数据源是IPagedList pagedList类型。
同时mvc页面记得添加一个model及引用：
@model PagedList<User>
@using Webdiyer.WebControls.Mvc;
Controller里面一般就是根据前台分页控件传回来的pageIndex来提取相应数据：
public ActionResult Index(int pageIndex=1,int pageSize=10) { var pagedList = _Services.GetPagedList(pageIndex,pageSize ); return View(pagedList ); }
对应的services层里获取数据：
public PagedList<Entity> GetPagedList( int p = 1, int s = 10) { var query = _db.Table; query = query.Where(t => t.State == (int)CommonState.正常); query = query.OrderByDescending(t => 1==1); return query.ToPagedList(p, s); }
完。
但是这种分页是刷新页面重新提取一下数据填充页面，对于用户体验来说不好。并且，在某些情况下满足不了需求。
比如说：当你需要根据用户输入的内容来作为你提取数据的条件时，上面的分页方式就不满足了。
在这里，推荐一个自己常用的js分页控件：
二、jquery.pagination.js分页
因为这是用jq去异步去请求数据，所以可以达到“无刷新”的效果，并且可以附带一些参数条件去请求。
使用时首先引用 jquery.pagination.js （分页js），跟pagination.css（分页样式css）。具体的网上一搜一大把。
前台关键js代码（用的seajs）：
define(function (require, exports, module) { var $ = require(‘$‘), global = require(‘global‘), loading = require("loading"); require(‘tmpl‘); require("pagination"); function App(options) { /// <summary> /// App 构造函数 /// </summary> //默认配置 var config = { getDataUrl: ‘‘,//获取数据地址 uiList: ‘‘,//前台填充母体 uiTemp: ‘‘,//前台填充模板 uiMsgTemp: ‘‘,//前台填充模板 uiPagination: ‘‘//前台分页控件id 或class }; if (options) { //合并配置 config = $.extend(true, config, options); } this.config = config; } App.prototype.initData = function (index, size, callback) { var self = this; loading.show(); $.ajax({ type: "POST", url: self.config.getDataUrl, data: { p: index, s: size }, success: function (result) { $(self.config.uiList).empty(); if (result.counts == 0) { if (self.config.uiMsgTemp != ‘‘) $(self.config.uiMsgTemp).tmpl().appendTo(self.config.uiList); } else { $(self.config.uiTemp).tmpl(result.data).appendTo(self.config.uiList); callback && callback(); self.GetData(index, size, result.counts, callback); } if ($(‘#j-pageTite‘).length > 0) $(‘#j-pageTite‘).html(result.counts); }, error: function () { loading.msg("系统错误"); } }); loading.hide(); } App.prototype.GetData = function (PageIndex, PageSize, ItemCounts, callback) { var self = this; //加入分页的绑定 $(self.config.uiPagination).pagination(ItemCounts, { callback: function (i) { self.initData(i + 1, PageSize, callback); }, prev_text: ‘上一页‘, //上一页按钮里text next_text: ‘下一页‘, //下一页按钮里text is_callback_on_init: false, items_per_page: PageSize, //显示条数 num_display_entries: 10, //连续分页主体部分分页条目数 current_page: PageIndex - 1, //当前页索引 num_edge_entries: 2 //两侧首尾分页条目数 }); } module.exports = App; });
最后调用
$(function () { require.async([‘../../api/api‘], function (api) { var _api = new api({ getDataUrl: ‘/AsynFllower/GetUserCollectItem‘, uiList: ‘#j-style-list‘, uiTemp: ‘#j-style-tmpl‘, uiMsgTemp: ‘#j-msg-tmpl‘, uiPagination: ‘.j-pagination‘ }); _api.initData(1, 10, function () { self.Cancel(); }); }); })
完。