pagination插件怎么获取后台数据

pagination插件怎么获取后台数据

文章的内容是使用bootstrap-paginator进行分页，使用ajax获取后台数据、渲染。
1. 版本说明
bootstrap 3.3.2
bootstrap-paginator v1.0 github
2. 准备工程
建立动态web工程，新建index.html页面，引入bootstrap相关css js文件。
3. 简单显示
在需要显示分页的位置添加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. 前台展示数据
前台需要先获取记录的总条数和每页容量。

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

其中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("

"+this.name+"

"); }); }, 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

文章的内容是使用bootstrap-paginator进行分页，使用ajax获取后台数据、渲染。 1. 版本说明 bootstrap 3.3.2 bootstrap-paginator v1.0 github 2. 准备工程 建立动态web工程，新建index.html页面，引入bootstrap相关css js文件。 3. 简单显示 在需要显示分页的位置添加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. 前台展示数据 前台需要先获取记录的总条数和每页容量。

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

其中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("

"+this.name+"

"); }); }, 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