bootstrap-paginator 分页插件使用示例
发布于 2014-10-01 03:12:16 | 7915 次阅读 | 评论: 1 | 来源: 网友投递
Bootstrap Web前端CSS框架
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，包括NASA的MSNBC（微软全国广播公司）的Breaking News都使用了该项目。
本文是一个bootstrap-paginator 分页插件的使用示例,为大家讲解了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 = 1, int take = 10)
{
//先简单的取出成绩吧
var id = CheckValid();
var res = _repository.GetExamResultsByUserId(id).ToList();
ViewBag.TotalPage = Math.Ceiling(((float)res.Count() / take));
var targets = res.Skip(take * (page - 1)).Take(take);
return PartialView(targets);
}
最后效果：
对比 jPaginate 而言，还是paginator简单好用。
推荐阅读
最新资讯