bootstrap-paginator基于bootstrap框架,使用起来非常简单。github地址:https://github.com/lyonlai/bootstrap-paginator

在bootstrap框架下只需要引入一个bootstrap-paginator.js

<script src="~/Content/js/bootstrap-paginator.min.js"></script>

html:

  <div id="logtable">
@Html.Action("GetExamLogs")
</div>
<div id="example"></div>

GetExamlogs一个显示图表的partview:

@using FireControl.Helper
@model IEnumerable<FireControl.Models.ExamResult> <table class="table table-hover table-bordered">
<tr>
<td>考试</td>
<td>试卷</td>
<td>姓名</td>
<td>总分</td>
<td>成绩</td>
<td>用时</td>
<td>开始时间</td>
<td>结束时间</td>
<td>解析</td>
</tr>
@foreach (var e in Model)
{
<tr><td>@e.ExamName</td><td>@e.PaperName</td><td>@e.UserName</td><td>@e.TotalScore</td><td>@e.Score</td><td>@CommonHelper.ConverTime(e.ExpenseTime)</td><td>@e.StartTime</td><td>@e.EndTime</td>
<td> <a class="ulink" href="@Url.Action("ActionDetail","Exam",new{examresid=e.Id})">查看解析</a></td>
</tr>
}
</table>
<input type="hidden" id="totalpage" value="@ViewBag.TotalPage" />

js:

<script >
$(function () {
var options = {
currentPage: 1,//当前页
totalPages: $("#totalpage").val(),//总页数
numberofPages: 5,//显示的页数 itemTexts: function(type, page, current) { //修改显示文字
switch (type) {
case "first":
return "第一页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "最后一页";
case "page":
return page;
}
}, onPageClicked: function (event, originalEvent, type, page) { //异步换页
$.post("/Exam/GetExamLogs",{page:page,take:2},function(data) {
$("#logtable").html(data);
});
}, };
$("#example").bootstrapPaginator(options);
});
</script>

Action

 public ActionResult GetExamLogs(int page = , int take = )
{
//先简单的取出成绩吧
var id = CheckValid();
var res = _repository.GetExamResultsByUserId(id).ToList();
ViewBag.TotalPage = Math.Ceiling(((float)res.Count() / take));
var targets = res.Skip(take * (page - )).Take(take);
return PartialView(targets);
}

最后效果:

之前一直使用 一直使用的jPaginate,感兴趣的同学可以移步。先对而言,还是paginator简单好用。

【MVC】bootstrap-paginator 分页插件笔记的更多相关文章

  1. Bootstrap Paginator分页插件

    Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...

  2. Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

    之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...

  3. Bootstrap Paginator分页插件+ajax

    Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub  Bootstrap分页插件属性介绍: http://www.cnblogs. ...

  4. Bootstrap Paginator分页插件(mark)

    Bootstrap Paginator分页插件

  5. Bootstrap Paginator 分页插件参数介绍及使用

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...

  6. Bootstrap Paginator分页插件的使用

    今天,我为大家带来的一款做得非常优秀的分页插件BootStrap Paginator,他是一款js插件,由于本人也是才刚刚搞出来的,所以暂时对它也不是特别了解,只能大楖告诉大家怎么使用.我这里使用的是 ...

  7. Bootstrap Paginator分页插件使用示例

    最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体 ...

  8. bootstrap-paginator 分页插件笔记

    [MVC]bootstrap-paginator 分页插件笔记   bootstrap-paginator基于bootstrap框架,使用起来非常简单.官网:http://harttle.github ...

  9. jq.paginator分页插件稍加修改

    样式一: 样式二: 此分页功能在jq.paginator分页插件上稍加修改. 必加模板html: <div id="jqPaginator"> <div id=& ...

随机推荐

  1. .Net多文件同时上传(Jquery Uploadify)

    前提:领导给了我一个文件夹,里面有4000千多张产品图片,每张图片已产品编号+产品名称命名,要求是让我把4000多张产品图片上传到服务器端,而且要以产品编码创建n个文件夹,每张图片放到对应的文件夹下. ...

  2. NPOI导出Excel(含有超过65335的处理情况)

    NPOI导出Excel的网上有很多,正好自己遇到就学习并总结了一下: 首先说明几点: 1.Excel2003及一下:后缀xls,单个sheet最大行数为65335 Excel2007 单个sheet ...

  3. css3之多列

                                             

  4. DbExpressionBinding requires an input expression with a collection ResultType. 参数名: input

    使用linq多表连接遇到的问题: 解决方案:注释为出错代码,更改使用GroupBy解决问题 context.ERG_TipOffsInfo.GroupBy(x => x.Data,(Data,C ...

  5. LeetCode(115) Distinct Subsequences

    题目 Given a string S and a string T, count the number of distinct subsequences of T in S. A subsequen ...

  6. IP地址框

    //IP地址框 // 此段代码:独立的获取本机IP地址和计算机名 WORD wVersionRequested; WSADATA wsaData; char name[255]; CString ip ...

  7. 用 R 进行高频金融数据分析简介

    作者:李洪成 摘自:http://cos.name/wp-content/uploads/2013/11/ChinaR2013SH_Nov03_04_LiHongcheng.pdf 高频数据 金融市场 ...

  8. IE跨域访问问题

    可能出现的症状: 1.跨域无法登录. 2.同一页面请求同一域名SESSION无法获取.(SESSION_ID一直在变) 一般情况下在方法前加上以下代码: header("P3P: CP=CU ...

  9. 黑马程序员-懒加载 lazy loading

    懒加载:延迟加载,当程序启动时不加载资源,当程序需要这些资源时再去加载.需要的时候再加载的一种方式,能够减少内存的占用,效率高.其本质是重写get方法. 背景:由于ios内存有限,如果我们一次性将所有 ...

  10. 关于JS Date 时间计算

    倒计时功能Demo:http://play.163.com/special/test-timeending/?1465197963677 获取时间 Date() 返回当日的日期和时间. getDate ...