【MVC】bootstrap-paginator 分页插件笔记
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 分页插件笔记的更多相关文章
- Bootstrap Paginator分页插件
Bootstrap Paginator分页插件使用示例 最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页 ...
- Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...
- Bootstrap Paginator分页插件+ajax
Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub Bootstrap分页插件属性介绍: http://www.cnblogs. ...
- Bootstrap Paginator分页插件(mark)
Bootstrap Paginator分页插件
- Bootstrap Paginator 分页插件参数介绍及使用
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态 ...
- Bootstrap Paginator分页插件的使用
今天,我为大家带来的一款做得非常优秀的分页插件BootStrap Paginator,他是一款js插件,由于本人也是才刚刚搞出来的,所以暂时对它也不是特别了解,只能大楖告诉大家怎么使用.我这里使用的是 ...
- Bootstrap Paginator分页插件使用示例
最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体 ...
- bootstrap-paginator 分页插件笔记
[MVC]bootstrap-paginator 分页插件笔记 bootstrap-paginator基于bootstrap框架,使用起来非常简单.官网:http://harttle.github ...
- jq.paginator分页插件稍加修改
样式一: 样式二: 此分页功能在jq.paginator分页插件上稍加修改. 必加模板html: <div id="jqPaginator"> <div id=& ...
随机推荐
- 清空stringbuilder
大家知道对于字符串频繁拼接是使用stringbuilder.Append方法比使用string+=方法效率高很多,但有时需要清空stringbuilder时却不知道怎么清空,因为它没有clear或em ...
- zend studio常用快捷键
1.提示符助手快捷键 alt+/ 你可以自定义 window->keys->Content assist->Binding 2.复制当前行 alt+ctrl+下 3.删除 ctrl+ ...
- 父窗口,子窗口之间的JS"通信"方法
今天需要在iframe内做一个弹窗,但使用弹窗组件的为子窗口,所以弹窗只在子窗口中显示掩膜层和定位,这样不符合需求. 后来晓勇哥指点,了解到一个以前一直没关注到的东西,每个窗口的全局变量,其实都存在对 ...
- java访问ftp的一些操作
通过java代码来访问ftp服务器,进行下载操作
- SVM系列之拉格朗日对偶
在学习SVM(Support Vector Machine) 支持向量机时,对于线性可分的分类样本求出的分类函数为: 其中,分类超平面可以表示为:
- JS-reverse(数组内容颠倒)
var arr1 = [ 1,2,3,4,5,6 ];// arr1.reverse();// alert( arr1 ); //怎么颠倒字符串呢? var str = 'abcdef';alert( ...
- Joseph(JAVA版)
package Joseph;//约瑟夫环,m个人围成一圈.从第K个人开始报数,报道m数时,那个人出列,以此得到出列序列//例如1,2,3,4.从2开始报数,报到3剔除,顺序为4,3,1,2publi ...
- Memcached服务介绍及安装指南
一.memcached服务介绍 1.为什么需要memcached服务 A:第一种场景 网站访问大多数情况下都需要查询数据库操作,如果网站的流量很大并且大多数的访问会造成数据库高负荷的状况下,由于大部分 ...
- btn-default
Bootstrap 还有一种属于按钮的 class 属性叫做btn-default . to
- [UCSD白板题] Points and Segments
Problem Introduction The goal in this problem is given a set of segments on a line and a set of poin ...