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

bootstrapTable翻页(后端分页)数据对不上的问题,第1张

bootstrapTable后端分页后前端翻页事件造成的显示数据偶尔不对
程序逻辑是这样的:
bootstrapTable列中有这样一列,实现自动排序

分页函数及方法:

后台对数据进行了筛选排序和跳页,翻页的时候,经常会出现展示初始数据的情况,ajax请求的数据好像没有加载一样。
分析了一下可能时这样的:
bootstrapTable再翻页时会先触发翻页函数onPageChange,同时也会触发本身向后台请求。所以相当于请求了两次,加载了两次。若上面的seoPageChange函数ajax请求没有数据,就好像做了一次重新加载。添加

翻页之前将数据清空,这样解决了翻页时数据对不上的问题。

但是最好的解决方式还是再翻页时将参数同bootstrapTable本身的后台方法一起传到后台,onPageChange方式比较多余。

简单使用:

1、在当前表格的最后新增数据

2、在当前表格的首行新增数据

3、根据id删除行

4、删除所有数据

5、更新指定行的数据

6、更新指定的列数据

7、重新加载数据(分页的时候要注意参数的传递)

前端代码块 function initTable(){ $('#test-table')bootstrapTable({ method: 'get', toolbar: '#toolbar', //工具按钮用哪个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存,默认为true,所以一般情况下需要设置一下

你要知道一个基础table的标签怎么去写, 只有知道这个基础, 你才能更好的用bootstrap中的table html在这不过多说明 既然看这篇文章, 肯定都能够理解 然后现在就把bootstrap中的table来详细说明一下 基础的table如下:
下面了解一下bootstrap中table, 没有什么大道理可以讲解 唯有一点, 通过表格的方式展示页面 首先有必要样式table 和一些选用样式 举例说明必要样式 首先要搭建一个基础框架, 请看系列经验第一篇
在搭建的基础框架里面的body部分填写table信息 然后在table的标签上加上基础样式table的css样式 你立刻发现, 界面瞬间好看多了
说明一下除了必要的table之外, 还有很多可选的class 不同的可选class 是可以联合使用的
1我们常用的就有边框的table 只需要使用table-bordered 查看效果图
2斑马线, 也就是隔行相同颜色的一个样式 使用table-striped样式
注意点有2个:
(1)斑马线是对tbody中的行起作用
(2)斑马线的实现方式是通过:nth-child CSS选择器实现的, 但是呢, 他不被ie8支持, 你懂我说的
3鼠标悬停在行上, 改变行的背景颜色 使用table-hover样式
注意: 这个需要多行的时候, 这种效果更加明显
4让表格更加紧凑的样式table-condensed, 它是让表格单元格中的内部(padding)减半展现更多的内容, 和更多的显示内容
其他的提醒说明: 在bootstrap中有这样的几个样式, 可以说是提醒样式 每个样式都是一种提醒方式 这些方式也可以放到table中 只需要使用class即可
上面状态的样式, 可以使用到不同的内容中, 比方说, tr中, td中, 都是可以的 下面的举例说明
注意点: 在使用这个样式的时候不能使用table-striped的样式, 会出现不能正常显示的问题
还有就是现在比较流行的响应式的table 只需要在table包含在table-responsive中即可, 作用为: 当屏幕小于768的时候, 才会出现滚动条, 否则滚动条消失
10
动手去尝试, 你发现学习bootstrap也就是这么简单祝你更快的学会这个框架


欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/zz/10724365.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-05-10
下一篇2023-05-10

发表评论

登录后才能评论

评论列表(0条)

    保存