发布于 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简单好用。