【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=& ...
随机推荐
- .Net多文件同时上传(Jquery Uploadify)
前提:领导给了我一个文件夹,里面有4000千多张产品图片,每张图片已产品编号+产品名称命名,要求是让我把4000多张产品图片上传到服务器端,而且要以产品编码创建n个文件夹,每张图片放到对应的文件夹下. ...
- NPOI导出Excel(含有超过65335的处理情况)
NPOI导出Excel的网上有很多,正好自己遇到就学习并总结了一下: 首先说明几点: 1.Excel2003及一下:后缀xls,单个sheet最大行数为65335 Excel2007 单个sheet ...
- css3之多列
- DbExpressionBinding requires an input expression with a collection ResultType. 参数名: input
使用linq多表连接遇到的问题: 解决方案:注释为出错代码,更改使用GroupBy解决问题 context.ERG_TipOffsInfo.GroupBy(x => x.Data,(Data,C ...
- LeetCode(115) Distinct Subsequences
题目 Given a string S and a string T, count the number of distinct subsequences of T in S. A subsequen ...
- IP地址框
//IP地址框 // 此段代码:独立的获取本机IP地址和计算机名 WORD wVersionRequested; WSADATA wsaData; char name[255]; CString ip ...
- 用 R 进行高频金融数据分析简介
作者:李洪成 摘自:http://cos.name/wp-content/uploads/2013/11/ChinaR2013SH_Nov03_04_LiHongcheng.pdf 高频数据 金融市场 ...
- IE跨域访问问题
可能出现的症状: 1.跨域无法登录. 2.同一页面请求同一域名SESSION无法获取.(SESSION_ID一直在变) 一般情况下在方法前加上以下代码: header("P3P: CP=CU ...
- 黑马程序员-懒加载 lazy loading
懒加载:延迟加载,当程序启动时不加载资源,当程序需要这些资源时再去加载.需要的时候再加载的一种方式,能够减少内存的占用,效率高.其本质是重写get方法. 背景:由于ios内存有限,如果我们一次性将所有 ...
- 关于JS Date 时间计算
倒计时功能Demo:http://play.163.com/special/test-timeending/?1465197963677 获取时间 Date() 返回当日的日期和时间. getDate ...