如何使用前端分页框架bootstrap paginator

前端分页框架bootstrap paginator用于web前端页面快速实现美观大方的翻页功能。
在实现交互良好的页面翻页功能时,往往还需要配合使用后端分页框架pagehelper。pagehelper框架于前端而言,主要作用是将分页数据pageInfo从后端传入到前端。
接下来给一个应用小栗子:
step1 我们需要在jsp页面所需要显示翻页选项的位置插入一个<ul>标签,并指定id,如下:

<ul id="pagination"></ul>

step2 下载并引用bootstrap-paginator.js文件,并在jsp页面引入代码如下:

<script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>

step3 在<script>标签中调用bootstrapPaginator初始化页面,示例代码如下:

<script>
$(function(){
// 使用bootstrap paginator初始化页面
$(‘#pagination‘).bootstrapPaginator({
bootstrapMajorVersion:3,
//pageInfo.pageNum是当前页面的页码
currentPage:${pageInfo.pageNum},
//pageInfo.pages是总页数
totalPages:${pageInfo.pages},
//配置页面跳转函数,向后端传入数据,发送跳转请求,
//type:选择的页码所显示的文字,如第一页默认type为first
//page:选择的页码
//current:当前页码
pageUrl:function(type,page,current)
{
return ‘${pageContext.request.contextPath}/front/product/search?pageNum=‘+page;
},

itemTexts:function(type,page, current)
{//文字翻译
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "尾页";
case "page":
return page;
}
}
});
});
</script>

这样以后,配合使用相关css样式,我们就可以看到翻页效果了,如下:

原文地址:https://www.cnblogs.com/JurasVon/p/11693274.html

时间: 2024-10-11 04:46:56

如何使用前端分页框架bootstrap paginator的相关文章

Bootstrap分页插件--Bootstrap Paginator

开源中国有一篇介绍的很详细,链接:https://my.oschina.net/shunshun/blog/204587 使用这个插件和使用其他Bootstrap内置的插件一样,需要引入如下文件: <link href="css/bootstrap.css" rel="stylesheet"> <script type="text/javascript" src="js/jquery-1.8.1.js">

bootstrap分页插件--Bootstrap Paginator的使用备份

html部分: <ul class="pagination"></ul> <!--bootstrap3版本用ul包裹--> <div class="pagination"></div><!--bootstrap2版本用div包裹--> JS部分: var options = { currentPage:'<%= currentPage %>', //当前页 totalPages:'&

Bootstrap Paginator分页插件使用示例

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

PageHelper+Bootstrap Paginator实现分页效果

最近需要做一个分页,找了挺多的前端分页效果,发现Bootstrap Paginator分页插件效果不错,而我页面也是用BootStrap做的响应式页面,就做了实现一个简单的分页效果. PageHelper地址:https://github.com/pagehelper/Mybatis-PageHelper Bootstrap Paginator:https://github.com/lyonlai/bootstrap-paginator 在SpringBoot+Mybatis做分页 1.首先添加

前端框架bootstrap(响应式布局)入门

Bootstrap,是基于HTML,CSS.javascript的前端框架 该框架已经预定义了一套CSS样式和与样式相对应的js代码(对应的样式有对应的特效.) 开发人员只需要编写HTML结构,添加bootstrap固定的class样式,就可以轻松完成指定效果的实现. 作用: 1.Bootstrap使得Web开发更加快捷,高效 2.Bootstrap支持响应式开发,解决了移动互联网前端开发问题. 简单介绍一下: 该框架是Twitter公司的设计师Mark Otto和jacob Thornton

关于前端框架BootStrap和JQueryUI(以及对应的优秀模板)

最近两个月由于需要升级公司产品的界面,所以不得不去学习了下原本并不熟悉的前端框架.这里也是推荐两款BootStrap和JQueryUI. bootstrap使用起始很简单,首先,需要得到所需要的Jar包,可以去中文官网http://getbootstrap.com/2.3.2/获取. 在我看来,要掌握bootstrap的用法有很多途径,可以去看帮助文档,或者看学习视频,这些能帮助你更系统全面的认识这个框架.但在时间不允许的情况下,我觉得最快的学习方法还是找个做好的基于次框架的网站或系统,然后看他

Bootstrap Paginator分页插件+ajax 实现动态无刷新分页

之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub 1.这是需要分页的页面放的 js函数: [javascript] view plaincopy <span style="font-size:14px;">function paging(page){ $.ajax({ typ

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 参数

python2.0_day19_前端分页功能的实现

我们前面完成的客户纪录展示,只有4条,如果有上百条就不能在1页中全部展示了,那样是不人性化的.另外一次性取出来,数据量也比较大.假如现在有95条数据,我们想实现一个每页展示20条,那就分为5页.假如我们实现了,那么前端每一次请求就需要给后台提供参数了.这个参数就是告诉views里的视图函数我取第几页.需求分析: 95条,每页20条 第一次请求 返回20条,并且后端返回当前返回是第几页 ,所以第一次返回是1 点击下一页 1+1=2 ,把2传给后端,后端拿到后在把第二页的内容返回给前端,并且把当前返