Bootstrap表格插件Bootstrap Table配置教程

bootstrap table smartDisplay的作用

smartDisplay作用

bootstrap table可以通过pageSize和pageList来设置表格每页固定显示多少条数据,用户通过pageList来选择每页显示多少条数据。这通常会遇到一个问题,假设你设置每页显示10条数据,那么表格的高度就是固定的如500px,由于用户屏幕分辨率不一样那么网页底部剩下的空白高度就不一样。一是影响美观,二是没充分利用网页空间。
 那么通过设置smartDisplay为true,bootstrap table会自动根据网页容器高度计算出pageSize和pageList的值你无需设置这两个值。

用图表示

 
 (图1)

   
 (图2)

在线试一试smartDisplay为true的情况 在线试一试只设置pageSize的情况

Catalog
快速入门 bootstrap table方法 bootstrap table事件 bootstrap table下载 基础配置 row Attributes设置行属性 custom Sort自定义排序 table Cache缓存数据 content Type设置 response Handler total/Data Field JSON格式 escape显示html标签 idField和selectItemName cardView卡片视图模式 detailView详情视图模式 icons图标相关设置 本地化中文设置 列相关设置 columns基础设置 sortable列排序 column选择操作列 column列属性列表 分页设置 bootstrap table服务端分页 table Method 方式设置 data Type数据格式 custom AJAX 自定义ajax bootstrap table前端分页 bootstrap table查询搜索 smartDisplay作用 分页时保持选择状态 工具栏相关 showHeader显示头部 showFooter显示底部 showColumns开启列刷选 showPaginationSwitch分页 showRefresh刷选按钮 showFullscreen toolbar工具栏设置 样式设置 固定表头并美化表头 设置表格样式隔行变色 rowStyle设置行样式 theadClasses设置表头样式 footerStyle底部样式