如何使用Bootstrap实现分页及翻页

如何使用Bootstrap实现分页及翻页,第1张

最近做的asp.netMVC项目中需要对数据列表进行分类,这个本来就是基于bootstrap开发的后台,因此也就想着bootstrap是否有分页插件呢,或者说是基于jquery支持的分页功能,这样整体的网站后台风格便能够统一,又不用自己去写一套分页的功能。

首先便是要下载Bootstrap Paginator了,github上便有这个的开源项目提供下载:

https://github.com/lyonlai/bootstrap-paginator

首先视图的上面应该需要引入js和css文件,主要有三个文件,分别是bootstrap的css,jquery以及Paginator的js文件。其中网上搜到,貌似jquery必须要1.8版本以上,这个我没有亲自去测试看过。于是视图的文件引用便:

<link href="css/bootstrap.css" rel="stylesheet">

<script type="text/javascript" src="js/jquery-1.8.1.js"></script>

<script type="text/javascript" src="js/bootstrap-paginator.js"></script>

然后,分页的功能当然是一个基于Ajax的局部刷新才能够吸引我们,当然这个便需要jquery的支持。之前自己搞的都是EasyUI的分页,这次也应该有点不同。

<script>

$(function () {

var carId = 1

$.ajax({

url: "/OA/Setting/GetDate",

datatype: 'json',

type: "Post",

data: "id=" + carId,

success: function (data) {

if (data != null) {

$.each(eval("(" + data + ")").list, function (index, item) { //遍历返回的json

$("#list").append('<table id="data_table" class="table table-striped">')

$("#list").append('<thead>')

$("#list").append('<tr>')

$("#list").append('<th>Id</th>')

$("#list").append('<th>部门名称</th>')

$("#list").append('<th>备注</th>')

$("#list").append('<th></th>')

$("#list").append('</tr>')

$("#list").append('</thead>')

$("#list").append('<tbody>')

$("#list").append('<tr>')

$("#list").append('<td>' + item.Id + '</td>')

$("#list").append('<td>' + item.Name + '</td>')

$("#list").append('<td>备注</td>')

$("#list").append('<td>')

$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' )">修改</button>')

$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' )">删除</button>')

$("#list").append('</td>')

$("#list").append('</tr>')

$("#list").append('</tbody>')

$("#list").append('<tr>')

$("#list").append('<td>内容</td>')

$("#list").append('<td>' + item.Message + '</td>')

$("#list").append('</tr>')

$("#list").append('</table>')

})

var pageCount = eval("(" + data + ")").pageCount//取到pageCount的值(把返回数据转成object类型)

var currentPage = eval("(" + data + ")").CurrentPage//得到urrentPage

var options = {

bootstrapMajorVersion: 2, //版本

currentPage: currentPage, //当前页数

totalPages: pageCount, //总页数

itemTexts: function (type, page, current) {

switch (type) {

case "first":

return "首页"

case "prev":

return "上一页"

case "next":

return "下一页"

case "last":

return "末页"

case "page":

return page

}

},//点击事件,用于通过Ajax来刷新整个list列表

onPageClicked: function (event, originalEvent, type, page) {

$.ajax({

url: "/OA/Setting/GetDate?id=" + page,

type: "Post",

data: "page=" + page,

success: function (data1) {

if (data1 != null) {

$.each(eval("(" + data + ")").list, function (index, item) { //遍历返回的json

$("#list").append('<table id="data_table" class="table table-striped">')

$("#list").append('<thead>')

$("#list").append('<tr>')

$("#list").append('<th>Id</th>')

$("#list").append('<th>部门名称</th>')

$("#list").append('<th>备注</th>')

$("#list").append('<th></th>')

$("#list").append('</tr>')

$("#list").append('</thead>')

$("#list").append('<tbody>')

$("#list").append('<tr>')

$("#list").append('<td>' + item.Id + '</td>')

$("#list").append('<td>' + item.Name + '</td>')

$("#list").append('<td>备注</td>')

$("#list").append('<td>')

$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' )">修改</button>')

$("#list").append('<button class="btn btn-warning" onclick="Edit(' + item.Id + ' )">删除</button>')

$("#list").append('</td>')

$("#list").append('</tr>')

$("#list").append('</tbody>')

$("#list").append('<tr>')

$("#list").append('<td>内容</td>')

$("#list").append('<td>' + item.Message + '</td>')

$("#list").append('</tr>')

$("#list").append('</table>')

})

}

}

})

}

}

$('#example').bootstrapPaginator(options)

}

}

})

})

</script>

而在视图的主体部分便有两个div,一个用来呈现数据列表,一个用来放置选择页面的导航。

<div class="span9">

<label>部门列表</label>

<hr />

<div id="list"></div>

<div id="example"></div>

</div>

而后台这个GetDate的方法就像下面这样:

public ActionResult GetDate(int id, int? page)

{

int pageIndex = page ?? 1//当前页

const int pageSize = 2//这里用来设置每页要展示的数据数量,建议把这个写到web.config中来全局控制

//获取需要展示的部门数据

IEnumerable<MODEL.qgoa_department>list = OperateContext.Current.BLLSession.Iqgoa_departmentBLL.GetPagedList(pageIndex, pageSize, x =>x.Id!=null, x=>x.Id)

//得到数据的条数

int rowCount = list.Count()

//通过计算,得到分页应该需要分几页,其中不满一页的数据按一页计算

if(rowCount%pageSize!=0)

{

rowCount = rowCount / pageSize + 1

}

else

{

rowCount = rowCount / pageSize

}

//转成Json格式

var strResult = "{\"pageCount\":"+rowCount+",\"CurrentPage\":"+pageIndex+",\"list\":" + JsonConvert.SerializeObject(list) + "}"

return Json(strResult, JsonRequestBehavior.AllowGet)

}

这个方法还是有点缺陷的,可以写的更加完美,就好像上面那个pageSize这个可以通过读取配置文件web.config来全局修改,这样管理起来也方便,另外对于页面这种属性:页码,当前页,数据数量等等的信息,可以做一个类来存储,如果网站的项目比较大的话,这样更加方便我们去更改自己的代码。

全局样式

1

Bootstrap 中用到一些 HTML元素和CSS属性需要将页面设置为 HTML5 文档类型,即在页面顶部添加“<!DOCTYPE html>”

2

布局容器:Bootstrap 需要为页面内容和栅格系统包裹一个 .container或container-fluid(占据全部视口viewport的容器)容器。

3

栅格系统,Bootstrap 提供了一套最多12列的流式栅格系统,通过 .row表示行 和 .col-xs-4 这种表示宽度的列快速创建栅格布局。

4

Bootstrap 排版、链接样式设置了基本的全局样式。

font-size 设置为 14px,line-height 设置为 1.428。

<p>(段落)元素还被设置了等于 1/2 行高(即 10px)的底部外边距(margin)。

基础样式

【排版】,

1. 标题,可以用来.h1 到 .h6 类给内联属性的文本赋予标题样式,标题内通过<small>标签或带.small 类的元素标记副标题。

主体文本:.lead 类让段落突出显示。

2. 内联文本,使用<mark>标签表示标注文本,<del>删除,<s>无用,<ins>插入,<u>下划线,<small>小号(父容器字体大小的 85%),<strong>着重,<em>斜体。

3. 文本对齐类,text-left,text-center,text-right,text-justify,text-nowrap

4. 文本大小写类,text-lowercase,text-uppercase,text-capitalize

5. 缩略语类,为 <abbr>元素设置 title属性并使用.initialism 类让 font-size 变得稍微小些。例:<abbr title="attribute" class="initialism">attr</abbr>

6. 地址,以日常使用的格式呈现,在行结尾加 <br>保留需要的样式即可。

7. 引用,将 HTML 元素包裹在 <blockquote>中即可表现为引用样式。对于直接引用,建议用 <p>标签。

8. 列表,list-unstyled类移除默认 list-style 样式和左侧外边距的一组元素(只针对直接子元素)。list-inline类通过设置 display: inline-block并添加少量的内补(padding),将所有元素放置于同一行。dl-horizontal类让 <dl>内的短语及其描述排在一行。

【代码】

<code>标签包裹内联样式的代码片段,

<kbd>标签标记用户通过键盘输入的内容,

<pre>展示代码块 。可用pre-scrollable 类设置最高350px带垂直滚动条。

<var>标签标记变量,

<samp>标签标记程序输出的内容。

【表格】

.table 类指定基本样式,

.table-striped 条纹样式,

.table-bordered 类为边框样式,

.table-hover 类带鼠标悬停样式,

.table-condensed 类紧凑样式。

状态类(行或单元格设置颜色):active,success,info,warning,info。

将任何 .table 元素包裹在 .table-responsive 元素内,即可创建响应式表格,其

响应式表格: 会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失。

【表单】

1. 基本实例,所有设置了 .form-control 类的 <input>、<textarea>和 <select>元素都将被默认设置宽度属性为 width: 100%。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获得最好的排列。

不要讲表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。

form-group,input-group,control-group,

2. 内联表单,<form>元素添加 .form-inline 类可使其内容左对齐并且表现为 inline-block 级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。

在内联表单中单选/多选框控件的宽度设置为 width: auto

如果你没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。对于这些内联表单,你可以通过为label 设置 .sr-only 类将其隐藏。

3. 水平排列的表单

通过为表单添加 .form-horizontal 类改变 .form-group 的行为,使其表现为栅格系统中的行(row)

4. 多选和单选框

.radio、.radio-inline、.checkbox、.checkbox-inline 。

5. 静态控件

水平布局的表单中,如需将一行纯文本和 label 元素放置于同一行,为 <p>元素添加 .form-control-static类即可。

6. 控件状态

.disabled类禁用控件,为<fieldset>设置disabled 时则禁用包含的所有控件。

a标签不受此类影响。

readonly 属性可以禁止用户输入

.has-warning、.has-error 或 .has-success 类到这些控件的父元素即可。任何包含在此元素之内的 .control-label、.form-control 和 .help-block 元素都将接受这些校验状态的样式。

你还可以针对校验状态为输入框添加额外的图标(注意依赖于label标签)。只需设置相应的 .has-feedback 类并添加正确的图标即可。

7. 控件尺寸

通过 .input-lg .input-sm类似的类可以为控件设置高度,通过 .col-lg-* 类似的类可以为控件设置宽度

通过添加 .form-group-lg 或 .form-group-sm 类,为 .form-horizontal 包裹的 label 元素和表单控件快速设置尺寸。

用栅格系统中的列(column)包裹输入框或其任何父元素,都可很容易的为其设置宽度。

8. 辅助文本

help-block类,针对表单控件的“块(block)”级辅助文本。

【按钮】

1. 基本样式,btn、btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、active

2. 展现形式,btn-link、btn-block、close

3. 尺寸样式,.btn-lg、.btn-sm 、.btn-xs 。

可通过 <a>、<button>或 <input>元素应用按钮类,但建议用 <button>元素来获得在各个浏览器上获得相匹配的绘制效果。

6

【图片】

图片形状,img-rounded,img-circle,img-thumbnail,IE8 不支持 CSS3 中的圆角属性。

7

【辅助】

text-muted、text-primary、text-success、text-info、text-warning、text-danger

bg-primary、bg-success、bg-info、bg-warning、bg-danger、

三角符号,caret

浮动

居中

组件样式

【图标】

200个来自 Glyphicon Halflings 的字体图标,

图标类只能应用在空元素上,且不可与其它组件联合使用。

<span class="glyphicon glyphicon-search"></span>

【菜单】

将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里

菜单对齐:默认情况下,下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐

菜单分组:dropdown-header表描述项,.disabled 表禁用项

向上d出: .dropup 类就能使触发的下拉菜单朝上方打开

【按钮组】

按钮组.btn-group,通过.btn-group-* 指定组中按钮尺寸。

按钮栏.btn-toolbar

钮垂直堆叠排列显示btn-group-vertical

两端对齐排列的按钮组btn-group-justified

【导航】

标签页.nav-tabs 类依赖 .nav 基类。

胶囊式标签页.nav-pills 类,添加 .nav-stacked 类改为垂直堆叠。

.nav-justified 类可以很容易的让标签页或胶囊式标签呈现出同等宽度。

navbar navbar-default

对于不包含在 <form>中的 <button>元素,加上 .navbar-btn 后,可以让它在导航条里垂直居中。

将表单放置于 .navbar-form 之内可以呈现很好的垂直对齐,

.navbar-text

.navbar-link

.navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。

.navbar-fixed-top 类可以让导航条固定在顶部

.navbar-fixed-bottom 类可以让导航条固定在底部

.navbar-static-top 类可让导航条随着页面向下滚动而消失。

.navbar-inverse 类可以改变导航条的外观。

breadcrumb 创建带有层次的导航结构(面包屑)。

【分页】

pagination,并根据情况对页码使用.disabled 类、 .active 类。

.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。

pager上一页和下一页的简单翻页。并可通过previous,next类标示。

【标签】

label标签基类,可通过label-default, label-primary, label-success, label-info, label-warning, label-danger改变标签的外观。

badge,可以很醒目的展示新的或未读的信息条目。

7

【其它】

缩略图

提示框

进度条

媒体对象等

定制样式

1

BootStrap提供了根据自己需要的组件及jquery插件进行定制,使用者也可以直接修改Less源码。

END

总结

1

本篇经验仅从全局简单介绍Bootstrap的内容,细节部分并不具体,Bootstrap的使用非常灵活,可以对各种组件进行合并使用(如:为标签页项 添加带下拉菜单),建议使用过程中实时参考官方文档,官方文档有更详细的下载及使用说明,针对具体样式有直观样例,而且有丰富的主题案例。

首先需要去thinkPHP官网现在其分页扩展类下载完成后,需要将其放在项目中的ThinkPHP/Extend/Library/ORG/Util/目录下,如果没有这个目录,需要自己进行创建,引入后代码结构如下:

如果直接按照官网的教程进行分页,那么出来的效果仅仅是显示一个简单的不带任何样式的连接加文字,这显然是不符合项目要求的。

这里介绍下如何制bootstrap风格的分页效果。由于该分页类输出分页的内容是div里面加连接的形式,而bootstrap采用的分页代码是nav下面ul+li+a的形式,所以需要修改分页类。

1.使用EditPlus(或其他带有行号显示的IDE)打开page.calss.php,需要修改如下地方:

protected $config =array('header'=>'条记录','prev'=>'上一页','next'=>'下一页','first'=>'第一页','last'=>'最后一页','theme'=>' <span style="font-size:18pxpadding-top: 5px

height: 30pxpadding-left: 5pxdisplay: inline-block">%totalRow% %header% %nowPage%/%totalPage% 页</span>%upPage% %downPage% %first% %prePage% %linkPage% %nextPage% %end%')

首先在34行,修改默认的theme如上,将输出的文字信息包裹在一个span中,并如上给其添加样式,这样做是由于默认输出的文字信息样式不符合要求,需要修改,这个 *** 作可以通过setConfig方法来完成,但是不建议这样做,因为theme进行setCongfig代码量较大,每次在代码中调用显然很冗余,建议直接修改这个分页类;

2.

复制代码

if ($upRow>0){

$upPage = " <li><a href='".str_replace('__PAGE__',$upRow,$url)."'>".$this->config['prev']."</a></li>"

}else{

$upPage = ''

}

if ($downRow <= $this->totalPages){

$downPage = "<li><a href='".str_replace('__PAGE__',$downRow,$url)."'>".$this->config['next']."</a></li>"

}else{

$downPage = ''

}

// <<<>>>

if($nowCoolPage == 1){

$theFirst = ''

$prePage= ''

}else{

$preRow = $this->nowPage-$this->rollPage

$prePage= "<li><a href='".str_replace('__PAGE__',$preRow,$url)."' >上".$this->rollPage."页</a></li>"

$theFirst = "<li><a href='".str_replace('__PAGE__',1,$url)."' >".$this->config['first']."</a></li>"

}

if($nowCoolPage == $this->coolPages){

$nextPage = ''

$theEnd = ''

}else{

$nextRow= $this->nowPage+$this->rollPage

$theEndRow = $this->totalPages

$nextPage = "<li><a href='".str_replace('__PAGE__',$nextRow,$url)."' >下".$this->rollPage."页</a></li>"

$theEnd = "<li><a href='".str_replace('__PAGE__',$theEndRow,$url)."' >".$this->config['last']."</a></li>"

}

// 1 2 3 4 5

$linkPage = ""

for($i=1$i<=$this->rollPage$i++){

$page = ($nowCoolPage-1)*$this->rollPage+$i

if($page!=$this->nowPage){

if($page<=$this->totalPages){

$linkPage .= " <li><a href='".str_replace('__PAGE__',$page,$url)."'>".$page." </a></li>"

}else{

break

}

}else{

if($this->totalPages != 1){

$linkPage .= "<li class='active'><a href='#'>".$page."</a></li>"

复制代码

从99行开始到141行结束,将所有输出的a标签按照如上方式更改,将每一个a标签都包裹在li中,便于客户端调用;

以上page类算是修改完成,接下来需要在页面中进行调用

页面调用前台代码为:

首先在页面中要引入bootstrap的css文件,

<link href="__APP__/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet">

然后在模板中如下调用:

<div class="table-responsive">

<table class="table table-striped">

<thead>

<tr>

<th></th>

<th>用户名</th>

<th>密码</th>

<th>电话号码</th>

<th>电子邮件</th>

<th>所属园区ID</th>

<th>可访问摄像头列表</th>

<th>注册时间</th>

<th>备注</th>

<th></th>

<th></th>

</tr>

</thead>

<tbody id="tbuser">

<volist name="list" id="vo">

<tr>

<td><input type="checkbox" name="udCheck"/></td>

<td>{$vo.userName}</td>

<td>{$vo.password}</td>

<td>{$vo.phoneNum}</td>

<td>{$vo.email}</td>

<td>{$vo.deptId}</td>

<td>{$vo.accessCamera}</td>

<td>{$vo.registerTime}</td>

<td>{$vo.memo}</td>

<td><a href='#' onclick="deleteUser('{$vo.userName}',this)" class="btn btn-danger btn-sm">删除</a></td>

<td><a href='/yunmu/Index/edit/id/{$vo.userName}' class="btn btn-primary btn-sm" >编辑</a></td>

</volist>

</tbody>

</table>

<nav style="text-align:center" >

<ul class="pagination">

{$page}

</ul>

</nav>

</div>

注意这里设置nav的样式是为了让其居中显示,pagination是bootstrap中自带的一个分页的css class,{$page}是后台传递给模板的输出的内容,

以上是前台代码的调用,后台PHP代码需要在显示的地方添加如下代码:

import('ORG.Util.Page')// 导入分页类

$count= $User->where($condition)->count()// 查询满足要求的总记录数

$Page=new Page($count,10)// 实例化分页类 传入总记录数,每页显示10条记录

$show=$Page->show()// 分页显示输出

$list = $User->where($condition)->order('userName')->limit($Page->firstRow.','.$Page->listRows)->select()

$this->assign('list',$list)// 赋值数据集

$this->assign('page',$show)// 赋值分页输出

$this->display()// 输出模板

其中$condition是你自定义的查询条件,$Page=new Page($count,10)表示实例化分页类并且一页显示10行数据,然后调用其show方法返回输出内容,再将其

传递给前台模板。

以上步骤完成之后,这个分页功能已经基本完成,效果如下:

以上采用其框架分页类的方式仅适合于表单提交查询(即页面整体跳转刷新)的分页,因为它对分页数据的控制是通过在URL尾部添加参数如p=1这种方式来实现的,所以实际上每次查询数据的分页你都得保证它能够获取完整的查询参数,否则可能点击第二页或者下一页的时候查询出来的结果就不是之前的结果了。建议将所有查询修改为采用get表单提交的方式。对于逻辑较为复杂或者需要采用ajax分页的场景,这个分页类并不能满足,需要自己去完成完整的前后台分页代码。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/tougao/11174404.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-14
下一篇 2023-05-14

发表评论

登录后才能评论

评论列表(0条)

保存