
程序逻辑是这样的:
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也就是这么简单祝你更快的学会这个框架
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)