pagination插件怎么获取后台数据

文章的内容是使用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 = nullswitch (page) { case "1": cur = s1breakcase "2": cur = s2breakcase "3": cur = s3breakcase "4": cur = s4breakcase "5": cur = s5breakdefault: break} out.print(cur)out.close()

5. 前台展示数据

前台需要先获取记录的总条数和每页容量。 <ol id="content"> </ol> <ul id="pagination" pageSize="2"><script>var totalPagesvar 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

vue 里el-pagination 分页设置全部？首先使用el-pagination组件。@size-change在每页数据的个数发生改变时触发。@curren-change在页数发生改变时触发。

数据源定义的数据，默认展示第一页，页面数据10条

 

 

方法触发时的 *** 作。

每页数据个数发生改变时触发handleSizeChange(size)，参数size即是选择的每页数据的数量。页数发生改变时触发handleCurrentChange(current)，current即是选择的页面。在web开发过程中，通常使用表格展示数据，在数据较多时采用分页的方式展示给用户。

分页方式有前端假分页和后端分页两种实现方式，此文仅记录前端假分页实现方式。

第一步：添加分页组件（el-pagination）在表格下方，添加的代码如下所示：

第二步：添加分页所需的变量，如下所示：

第三步：添加相应的分页方法，如下所示：

第四步：修改查询按钮逻辑，在成功查询后，更新数据的总数量。代码如下所示：

第五步：使用slice实现前端的假分页，最终vue文件中的主要代码如下所示：

最终效果如下所示：

可使用占位符从数据集中的字段导入HTML以在分页报表中使用。

可使用占位符从数据集中的字段导入HTML以在分页报表中使用。默认情况下，占位符表示纯文本，因此需要将占位符的标记类型改为HTML。

分页是指在web页面有大量数据需要显示时，当一页的内容太多不利于阅读和不利于数据提取的情况下，可以分为多页进行显示。

---