为了账号安全,请及时绑定邮箱和手机立即绑定

bootstrap-Table服务端分页,获取到的数据怎么再页面的表格里显示

/ 猿问

bootstrap-Table服务端分页,获取到的数据怎么再页面的表格里显示

扬帆大鱼 2019-06-07 07:06:34

bootstrap-Table服务端分页,获取到的数据怎么再页面的表格里显示


查看完整描述

2 回答

?
一只名叫tom的猫

 boostrap 把后台传来的数据分页的解决办法

  • bootstrap的分页

  • 1在bootstrap中分页有两种, 一种是正常的分页, 第二种是翻页. 就是有上一页和下一页的显示效果. 

  • 1.分页: 带有页面的效果, 这里你里面可以随你的网站怎么定义都可以, 比方说. 里面不是文字, 而是一些图标,一样可以. 只不过数字能够更好的看效果. 使用样式: .pagination

  • 2.带有上一项和下一项的翻页效果, 最简单的方式. 样式.pager

  • 两种方法的实现, 都是需要使用ul标签, 链接是使用a.  还有一些状态, 比方说, 我选中了某一项.  其中的某一项静止使用. 

  • 步骤阅读.2一个简单的分页, 默认的效果.  在ul上加上样式.pagination, 然后下面就是一个一个的li. 然后实现效果, 就如图所示,  这就是一个最简单的默认的样式. 可以看出来, 实现起来很简单. 但是效果却很棒. 

  • 步骤阅读.3如何在显示的页面上高亮显示, 标识显示的是该页. 这里使用样式.active. 来标识选择的页面. 查看效果和代码如图.

  •  这里需要注意的是: 在该代码里增加了如下的代码: <span class="sr-only">(current)</span> 是因为, 该代码表示, 当前页面不为能点击. 因为当前页面, 数据已经刷新出来了. 如果你想要点击, 就把这句话去掉. 

  • 步骤阅读.4如何在到第一页或者尾页的时候, 让上一页和下一页禁止用户点击. 这里可以使用.disabled 样式来实现.  如图所示, 让上一页不能点击. 在不想让单击的样式上加上.disabled 即可. 

  • 步骤阅读.5在分页里面, 定义了除了默认的样式大小之外, 还定义了另外两种样式. 

  • 1 .pagination-lg 比默认样式大的样式

  • 2 .pagination-sm 比默认样式小的样式

  • 实现代码对比效果.  左侧是放大的样式, 右侧是缩小的样式. 

  • 步骤阅读.6这里给出的样式都是最简单的样式, 如果需要其他样式的, 比方说, 不喜欢这个颜色. 等等, 那就需要自己自定义样式来实现. 

  • bootstrap的翻页

  • 1用简单的标记和样式,就能做个上一页和下一页的简单翻页。比方说博客和文章类的网站, 就很多使用了这样的样式. 样式使用.pager, 效果和代码如图, 这里更加简单的显示了上一页和下一页. 样式是居中在页面上. 那如何把上一项和下一项放在页面的两端呢. 继续往下看. 

  • 步骤阅读.2

  • 如何让按钮在两端显示呢? 这里使用对齐链接. 样式分别为: .previous 和 .next

  • 实现代码如图. 需要注意的是, 这个样式里面默认不支持, 使用分页样式, 如果想两种同时使用, 需要自己另外写代码. 

  • 步骤阅读.3在翻页这个样式里面, 也可以让上一篇或者下一篇禁用, 禁用方法和分页一样, 使用样式.disabled 

  • 步骤阅读.4这两种样式, 基本上都能够支持大多少我们遇到的分页问题. 还有一种就是移动端的, 这个的话, 就可以使用一个链接按钮, 然后异步获得数据就可以了. 



查看完整回答
反对 回复 2019-06-08
?
哆啦的时光机

文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据、渲染。
1. 版本说明
bootstrap 3.3.2
bootstrap-paginator v1.0 github
2. 准备工程
建立动态web工程,新建index.html页面,引入bootstrap相关css js文件。
3. 简单显示
在需要显示分页的位置添加ul标签
<ul id="pagination"> </ul>
在页面底部添加js代码
<script> var options = { bootstrapMajorVersion: 3, alignment:'center', currentPage:1, numberOfPages:5, totalPages: 10, }; $(document).ready(function(){ $("#pagination").bootstrapPaginator(options); }); </script>
启动web服务,访问index.html页面,可以看到分页显示。
4. 后台准备数据
建立一个servlet,负责向前台输出json数据。
PrintWriter out = response.getWriter(); String s1 = "[{\"name\":\"lilei\"},{\"name\":\"lilei2\"}]"; String s2 = "{\"name\":\"hanmeimei\"}"; String s3 = "{\"name\":\"jim\"}"; String s4 = "{\"name\":\"jim1\"}"; String s5 = "{\"name\":\"jim2\"}"; String page = request.getParameter("page"); String cur = null; switch (page) { case "1": cur = s1; break; case "2": cur = s2; break; case "3": cur = s3; break; case "4": cur = s4; break; case "5": cur = s5; break; default: break; } out.print(cur); out.close();
5. 前台展示数据
前台需要先获取记录的总条数和每页容量。 <ol id="content"> </ol> <ul id="pagination" pageSize="2"> <script> var totalPages; var pageSize = $("#pagination").attr("pageSize"); $.ajax({ url:"/BootstrapPagination/QueryStudents", type:"POST", dataType:"json", async:false, success:function(data){ window.totalPages = Math.ceil(data /pageSize) ; }, error:function(error){ alert("error"); } }); </script> </ul>
其中pageSize设置为2,先用post方法获取totalPages,用来初始化分页插件。
<script> var options = { bootstrapMajorVersion: 3, alignment:'center', currentPage:1, totalPages: totalPages , pageUrl: function(type, page, current){ return "/BootstrapPagination/QueryStudents?page="+page; }, onPageClicked: function (event, originalEvent, type, page) { originalEvent.preventDefault(); originalEvent.stopPropagation(); $.ajax({ url:originalEvent.target.href, type:"GET", dataType:"json", success: function(data){ $("#content li").remove(); $(data).each(function(){ $("#content").append("<li>"+this.name+"</li>"); }); }, error: function(error){ alert("error"); } }); } }; $(document).ready(function(){ $("#pagination").bootstrapPaginator(options); $("#pagination li:first a").trigger("click"); }); </script>
运行程序即可。详细的可以参见bootstrap-paginator说明,或者去bootstrap-paginator github查阅。
工程下载bootstrap-paginator.zip jdk1.8 tomcat 8


 


查看完整回答
反对 回复 2019-06-08

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信