MVC——分页控件-飞外

public ActionResult Index(int pageIndex=1,int pageSize=10) var pagedList = _Services.GetPagedList(pageIndex,pageSize );
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 //两侧首尾分页条目数 
$$(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(); })