首页 > 代码库 > 【MVC】bootstrap-paginator 分页插件笔记
【MVC】bootstrap-paginator 分页插件笔记
bootstrap-paginator基于bootstrap框架，使用起来非常简单。官网：http://harttle.github.io/bootstrap-paginator/
在bootstrap框架下只需要引入一个bootstrap-paginator.js
<script src="http://www.mamicode.com/~/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简单好用。
【MVC】bootstrap-paginator 分页插件笔记
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。