【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=& ...
随机推荐
- PHP中phar包的使用
PHP5.3之后支持了类似Java的jar包,名为phar.用来将多个PHP文件打包为一个文件. 首先需要修改php.ini配置将phar的readonly关闭,默认是不能写phar包的,includ ...
- linux修改主机名称
http://blog.csdn.net/qq_20480611/article/details/51017033 ========================================== ...
- python的正负无穷float("inf")的用法
今天,在看书的时候看到这么一个例子: 这是用来求解 从某个数字列表中找出俩个彼此最接近但是不相等的数(俩者之间的绝对差是最小的): >>> from random import ra ...
- oracle 创建用户和imp指定表空间
创建用户: 1,sqlplus sys/pwd as sysdba; 2, create user username identified by password; 3, grant dba,conn ...
- Spark简介
Spark是UC Berkeley AMP lab所开源的类Hadoop MapReduce的通用并行框架,Spark,拥有Hadoop MapReduce所具有的优点:但不同于MapReduce的是 ...
- php和syslog
syslog是Linux系统默认的日志守护进程.使用syslog可以方便把指定的事件写入特定文件中,可以让任何事件都登录到一台或多台服务器上. 1.简单例子,先说一下syslog怎么使用,以php为例 ...
- 深入研究C语言 第二篇(续)
1. 关于如下的程序,关于结构体的拷贝,拷贝是拷贝到内存中的什么地方? 我们进入debug进行反汇编,单步等操作跟踪查看.发现: 在main中,我们看到call 0266应该对应的是转跳到func处执 ...
- CAD二次开发 - 可缩放块(四)
1.说明 可进行缩放性注释的对象有:文字.标注.图案填充.公差.多重引线.块及属性. 2.为图形添加.删除注释比例步骤 1)使用AnnotationScale类(在DatabaseServices命名 ...
- zabbix利用mutt和msmtp配置邮件报警
Mutt安装 yum –y install mutt msmtp安装 yum –y install openssl openssl-devel libntlm libntlm-devel cyrus- ...
- RabbitMQ 问题记录
1. rabbitmq安装后无法运行,报错“unable to connect to node rabbit@XXXX: nodedown”. 怀疑局域网内有相同名称的计算机安装了rabbitmq,造 ...