通过给每一个需要切换子内容元素设置对应上述锚点的id｛#padding｝,并且不要忘了给外层容器加（tab-content），给子元素容器加class(tab-pane fade in active),有active的就是默认选中的。每一个子内容都有一个table元素，所以这里就是我们需要的table，切换每一个tab就会刷新显示对应的table数据。这里我们采用动态的生成table的方式加载数据。
,",`,和 ' 字符.
searchOnEnterKey: true,//设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
idField: 'systemId',//指定主键
maintainSelected: true,//设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项
toolbar: '#toolbar',//一个jQuery 选择器，指明自定义的toolbar
columns: [
{field: 'complain_reason',title: '举报类型',align: 'center'},{field: 'nick_name',title: '举报人',{field: 'create_time',title: '举报时间',formatter:'timeFormat' },{field: 'complain_state',title: '举报状态',formatter:'stateFormat'}
{field: 'action',title: '操作',align: 'center',formatter: 'actionFormatter',events: 'actionEvents',clickToSelect: false}
]
});
}
以上就是初始化table的函数，传index是为了切换时候请求不同的地址刷新不同的table，因为在每一个tab切换菜单都有onclick事件函数 freashTable（index）,table的所有用到的配置我都在上述代码中做了注释，想看跟详细的配置请看官网配置（）。columns配置每一行，field是对应的每一列要显示的字段key值，title对应的是每一列的头部，formatter是格式化每一列的自定义函数,下面只展示时间格式化函数代码：
对应的field为action的那一行就是操作按钮了，格式化操作按钮代码如下：
同时分页bootstrap已经提供了完整的配置（包括每页显示的行数，分页按钮，总条数和总页数等等）但是没有跳转到指定行，所以需要我们自己写他的样式定位到相应的分页栏，不过他有相关的方法提供，
selectPage就是跳到指定页，我们可以自己系一个方法：
在用其方法时候，要$table.bootstrapTable('selectPage',page)使用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
