基于bootstrap的分页

由于之前写了一个局部刷新的分页,为了自己以后工作方便所以再上传一个通用的分页,基于bootstrap的分页,引用和上次写的局部刷新一样,在这里就不写了

js代码 在页面加载的时候执行

   var options = {
                bootstrapMajorVersion: 3,//版本
                currentPage: @Convert.ToInt64(Model.PageNumber) ,//当前页数
                numberOfPages: 10,//设置显示的页码数
                totalPages: @Convert.ToInt64(Model.PageCount) ,//总页数
                itemTexts: function (type, page, current) {
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "末页";
                        case "page":
                            return page;
                    }
                },
                pageUrl: function (type, page, current) {
                    return "/Comment/CarReply?pageIndex=" + page;
                }
            };
            element.bootstrapPaginator(options);

  

html

<div>
<ul id="page"></ul>
</div>

Controller代码(需要返回分页类型)

[AuthorizationCodeAttribute]
       [Description("评论信息")]
       [HttpPost]
       public ActionResult Comment(int id,int? page)
       {
           #region 评论列表
           var dal = new CarCommentOperator();
           int pageIndex = page ?? 1;//当前页
           if (!string.IsNullOrEmpty(Request.QueryString["pageindex"]))
           {
               if (!int.TryParse(Request.QueryString["pageindex"], out pageIndex))
               {
                   pageIndex = 1;
               }
           }
           const int pageSize = 2;
           long totalCount;
           long totalPageCount;
           IEnumerable<CarComment> list = dal.GetList(pageIndex, pageSize, out totalPageCount, out totalCount, "CarId=" + id);
           var commentIPagedList = new StaticPagedList<CarComment>(list, pageIndex, pageSize, Convert.ToInt32(totalCount));
           #endregion
       return View(commentIPagedList);

       }

  

基于bootstrap的分页

时间: 2024-10-03 12:18:18

基于bootstrap的分页的相关文章

JSP分页显示实例(基于Bootstrap)

首先介绍一款简单利落的分页利器:bootstrap-paginator 效果截图: GitHub官方下载地址:https://github.com/lyonlai/bootstrap-paginator 备用下载地址:http://files.cnblogs.com/files/Dreamer-1/bootstrap-paginator-master.rar 下面就来详细介绍一下基于这款分页利器的JSP分页显示实现过程(注:相较于原网页我隐去了很多不必要的内容,本例只专注于分页显示的实现) 一:

基于Bootstrap的Asp.net Mvc 分页的实现

最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一个Mvc 项目,既然是分页就需要一些数据,我这边是模拟了一些假的数据,实际的项目中都是在数据库中去取得的,很简单的数据: 1 public class User 2 { 3 public string Name { get; set; } 4 5 public int Age { get; set; } 6 } 取数据我这边是加了120个数据: 1 publ

基于Bootstrap仿淘宝分页控件实现

.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { text-align: center; margin-top: 20px; margin-left: 10px; margin-bottom: 20px } a { cursor: pointer; text-decoration: none; color: gray } a:hover { text

基于Bootstrap的Asp.net Mvc 分页的实现(转)

最近写了一个mvc 的 分页,样式是基于 bootstrap 的 ,提供查询条件,不过可以自己写样式根据个人的喜好,以此分享一下.首先新建一个Mvc 项目,既然是分页就需要一些数据,我这 边是模拟了一些假的数据,实际的项目中都是在数据库中去取得的,很简单的数据: public class User { public string Name { get; set; } public int Age { get; set; } } 取数据我这边是加了120个数据: public List<User>

Bootstrap Paginator分页插件使用示例

最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体的网站后台风格便能够统一,又不用自己去写一套分页的功能. 首先便是要下载Bootstrap Paginator了,github上便有这个的开源项目提供下载: https://github.com/lyonlai/bootstrap-paginator 首先视图的上面应该需要引入js和css文件,主要

基于angularJS的分页功能

先看分页效果图 是基于bootstrap的基本分页效果,样式可以先去查看boostrap文档熟悉. 在以angularJS中,像这种公共组件一般(也应该)写到公共directive中,下面可以下项目中怎么实现的. ①. 公共组件 pageDirective.js define(['angular'], function(angular) { //依赖angularJS,这里用到了requireJS,未使用者自行更改 var directives = angular.module("app.dir

Bootstrap Paginator 分页插件参数介绍及使用

Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作.目前经过测试的浏览器包括: Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+. GitHub 官网地址:https://github.com/lyonlai/bootstrap-paginator 参数

自己写的基于bootstrap风格的弹框插件

自己写的一款基于bootstrap风格的弹框插件,暂时只有确认框.提示框.后续功能扩展.bug修改再更新. ;(function($){ //默认参数 var PARAMS; var DEFAULTPARAMS = { width: 500, title: '提示消息', content: '', okbtn: '确定', cancelbtn: '取消', headerBackground: 'info', vbackdrop: 'static', //默认点击遮罩不会关闭modal vkeyb

基于Angularjs实现分页

基于Angularjs实现分页 http://www.cnblogs.com/sword-successful/archive/2015/06/28/4605222.html