Bootstrap 分页插件 ajax获取数据显示
来源:互联网 发布:购买国外域名和空间站 编辑:程序博客网 时间:2024/05/17 01:17
Bootstrap 分页插件 ajax获取数据显示
标签(空格分隔): bootstrap
- Bootstrap 分页插件 ajax获取数据显示
- 版本说明
- 准备工程
- 简单显示
- 后台准备数据
- 前台展示数据
文章的内容是使用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
0 0
- Bootstrap 分页插件 ajax获取数据显示
- bootstrap select2插件用ajax来获取和显示数据
- ajax获取json数据使用jquery分页插件显示
- bootstrap-table插件实现ajax服务端分页显示
- bootstrap、jQuery、Ajax数据分页
- 使用vue Ajax获取数据列表并用BootStrap显示
- Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
- Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
- Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
- jQuery+Ajax分页显示数据
- bootstrap的pages控件分页获取数据
- Bootstrap分页插件--Bootstrap Paginator
- Bootstrap分页插件--Bootstrap Paginator
- bootstrap分页插件Bootstrap Paginator
- Bootstrap分页插件--Bootstrap Paginator
- 带有分页排序功能的表格插件的使用(通过ajax获取后台数据)
- Bootstrap分页插件
- 自制bootstrap分页插件
- Linux tar: xx: Not found in archive
- Android图片压缩
- ubuntu14.04系统下在Nginx中安装wordpress
- Bluemix云平台实践: CLI应用之DB2控制台(2)
- Android上传图片到服务器
- Bootstrap 分页插件 ajax获取数据显示
- jQuery入门:jQuery是如何工作的 How jQuery Works
- Android学习笔记
- An internal error occurred during: "Building workspace". GC overhead limit exceeded
- make命令重定向
- 黑马程序员--Java之fianl修饰符
- 配置文件home读取操作重要流程
- [leetcode] Maximum Subarray
- [Effective C++] 读书笔记 I 书读百遍,其义自现