bootstraptable前端分页的问题

夏主      2022-02-13     763

关键词:

之前一直都是使用bootstrap table的后端分页,后来有一次不是服务器端分页写的,又比较懒,不想改后端接口太多。

考虑到数据量不算多,顶多一千条数据,就改成前端分页,后端可以不用改什么,就配合改一下数据格式。

设置参数sidePagination: "client",client是客户端分页,server是服务端分页,自不用说,其他参数选项按需使用就行。

搜索网上的使用方法,一直都无法显示数据,直到查看bootstrap table的数据流转源码,才发现数据格式有问题。

网上都说数据格式是:

{
  "total": 数字,
  "rows": 数组
}

查看bootstrap table官网,建议的数据格式其实是分两种(https://bootstrap-table.com/docs/api/table-options/#data),如下图,使用服务器端分页和不使用服务器端分页。

 

 

按照官网建议,使用服务器端的数据格式是如上面所写的那种数据格式,下图为官网建议形式:

 

 

不使用服务器分页是直接将数据以数组的形式返回,下图为官网建议形式:

 

 

我不太记得当时是不是实验了官网建议的直接使用数组的形式返回,我是通过查看源码的方式,发现数据的流转识别的是名为【data】的数据,如下图:

 

 我将返回的数据,改数据key为“data”,即可解决问题,成功实现前端分页。

当然因为bootstrap table的包有很多版本,不一定所有人都会遇到一样的问题,下面是我所用的包版本:

 

 希望对大家排障有所帮助,反正之前我一直找不出来为什么显示不出来数据的原因,挺浪费时间的,本来想少改东西,反倒是更费时间了。

 

bootstraptable翻页(后端分页)数据对不上的问题

参考技术AbootstrapTable后端分页后前端翻页事件造成的显示数据偶尔不对程序逻辑是这样的:bootstrapTable列中有这样一列,实现自动排序分页函数及方法:后台对数据进行了筛选排序和跳页,翻页的时候,经常会出现展示初始数据... 查看详情

bootstraptable前端分页不显示数据

参考技术AbootstrapTable后台分页改前台分页不仅仅是改一个sidePagination就行,返回的数据格式也要改通常后台分页设置参数后台返回的数据格式,包含总条数和当前页显示的数据如果想要前台分页,修改参数后台返回的数据不能再是... 查看详情

bootstraptable服务端分页

前端js$(function(){//$(‘#MDTable‘).bootstrapTable(‘destroy‘);$("#MDTable").bootstrapTable({//‘destroy‘是必须要加的==作用是加载服务器数据,初始化表格的内容Destroythebootstraptable.toolbar:‘#toolbar‘,//工具按钮用哪个容器method:‘get‘,url:" 查看详情

bootstraptable怎么选择多行

参考技术A以下是JS代码$('#tb_departments').bootstrapTable(url:MNG_DOMAIN+"/admin/v1/role/page/query.do",//请求后台的URL(*)classes:"tabletable-hover",dataType:"json",method:'post',//请求方式(*)toolbar:'#toolbar',//工具... 查看详情

[转]bootstraptable后端分页(ssm版)

...文地址:https://www.cnblogs.com/flyins/p/6752285.html  说明bootstraptable可以前端分页,也可以后端sql用limit分页。这里讲的是后端分页,即实用limit。性能较好,一般均用这种源码下载地址:https://git.oschina.net/dingshao/pagination_byjava.git... 查看详情

一个关于a标签和分页的怪问题!

用bootstrap做了用户电话号码查询的前端页面。并且用了MVCPager分页。Bootstrap前端页如下:一开始使用了用A标签,分页成功后,我进入第二页,点击这个A标签,页面会自动跳转到第一页。相当无解。。想不通。经过和群里高手交... 查看详情

bootstraptable服务端分页问题

...为了方便,前台直接传pagesize就好) 1$(‘#tablelist‘).bootstrapTable({2url:url3method:‘post‘,4toolba 查看详情

前端问题整理(代码片段)

1.关于页面在首次加载后不查询分页错误问题(排除首次分页带条件)有句话说得好:解决问题的思维不能由产生问题的思路去解决!这是个很好的例子:在项目中某个查询页面,首次进入页面的时候将其中所有的数据全数渲染... 查看详情

bootstraptable动态增删改表格内数据

参考技术A简单使用:1、在当前表格的最后新增数据2、在当前表格的首行新增数据3、根据id删除行4、删除所有数据5、更新指定行的数据6、更新指定的列数据7、重新加载数据(分页的时候要注意参数的传递) 查看详情

bootstraptable两种分页需要的数据不同

...0/article/details/50269723问题描述:  调用$("#show_list_table").bootstrapTable("refresh");刷新table以后,搜索条件可以传入,也请求到了数据,但是就是不在table中展示数据。  最后发现是因为服务器端分页和客户端分页需要的json格式不... 查看详情

bootstraptable点击某行的删除按钮,删除当前行记录,怎么只刷新表格当前页的内容?

参考技术A$table.bootstrapTable('removeByUniqueId',1);本回答被提问者采纳 查看详情

vue前端分页

参考技术A1.首先写好分页 页码2.定义好,所有数据数组,总条数,每页数量,当前页3.根据后台数据的长度确定好表格总条数4.在computer中,定义好每页的开始位置  就是beginIndex。0,10,20这样自带的然后计算每页的数据... 查看详情

bootstraptable的属性sidepagination设置不当导致数据不显示

  使用bootstraptable,某个页面不需要分页,就将参数pagination设置为了false。想想既然不用分页了,干脆分页方式也删掉吧,结果莫名的结果是“没有找到匹配的记录”,而前端调试看Network内容,明明返回了两条数据。  ... 查看详情

如何从分页的 ef 核心查询中获取可用的总行数

...取成员列表的分页响应。我还需要返回响应的总数,以便前端知道结果将在多少页中返回。 查看详情

mybatisplus与前端分页工具结合实现

...总是希望前后端搭配干活,实现一些好用的功能。比如说前端表单点击表头排序,这个功能我们就可以结合分页插件完成。而且我们现在很多时候会开发多端项目,在不同前端使用不同组件适配后端接口的时候,总可能遇到命名... 查看详情

关于bootstraptable的server分页

首先是bootstrap初始化的表格参数://初始化TableoTableInit.Init=function(){$(‘#booksTable‘).bootstrapTable({url:‘/TestWeb/booksTable‘,//请求后台的URL(*)method:‘get‘,//请求方式(*)toolbar:‘#toolbar‘,//工具按钮用哪个容器striped:true,//是否显 查看详情

启用分页的 UISCrollview

】启用分页的UISCrollview【英文标题】:UISCrollviewwithpagingenabled【发布时间】:2011-06-0810:15:02【问题描述】:我想要一个同时具有分页和缩放功能的UIScrollview。所以我使用了2个UIScrollviews。启用分页的MainScrollview和禁用分页的subscroll... 查看详情

django-前端分页效果

参考技术APaginator和Page类都是用来做分页的。他们在Django中的路径为django.core.paginator.Paginator和django.core.paginator.Page。以下对这两个类的常用属性和方法做解释:count:总共有多少条数据。num_pages:总共有多少页。page_range:页面的... 查看详情