Bootstrap Table是基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

现在做的一个app管理以及后台配置系统，需要针对不同的城市作相应的定制化的配置，对一些后台数据也做一些展示和操作，所以每一个模块基本都会有表格的展现形式，这样做的好处就是直观方便操作。对于用什么table插件，无疑就是bootstrap table了，功能强大文档完善，并且我们项目里也是基于bootstrap布局的，所以就选择了他，接下来就贴一些项目代码来展示（仅供参考），自己也做一下笔记。

首先是用到了bootstrap的Tab来切换不同的表格用于展示，切换菜单代码如下：

 <div class="report-count">被举报次数：${count}次</div>
  <ul class="report-btn nav nav-tabs" id="myTab" >
    <li class="pending active"><a href="#padding" onclick="freashTable(0)" data-toggle="tab">待处理：${stateCountList[0]}次</a><i class=""></i></li>
    <li class="success-report"><a href="#success-report" onclick="freashTable(1)" data-toggle="tab">举报成立：${stateCountList[1]}次</a></li>
    <li class="fail-report"><a href="#fail-report" onclick="freashTable(2)" data-toggle="tab">举报不成立：${stateCountList[2]}次</a></li>
  </ul>

相信对于bootstrap并不陌生，给每一个需要切换的标签 加上｛data-toggle="tab"｝，并且增加锚点用于匹配到对应的切换的子内容｛锚点：href="#padding" rel="external nofollow" ｝，切换对应的字内容代码如下：

<div class="table-view tab-content">
      <div class=" tab-pane fade in active" id="padding">
       <div class="table-header clear">
        <c:forEach items="${complainCount1}" varStatus="i" var="c" >
         <div>${c.complain_reason}：${c.count}次</div>
        </c:forEach>
       </div>
       <div class="line addStyle"></div>
       <div>
        <table class="table"></table>
       </div>
      </div>
      <div class="tab-pane fade" id="success-report">
       <div class="table-header clear">
        <c:forEach items="${complainCount2}" varStatus="i" var="c" >
         <div>${c.complain_reason}：${c.count}次</div>
        </c:forEach>
       </div>
       <div class="line addStyle"></div>
       <div>
        <table class="table"></table>
       </div>
      </div>
      <div class="tab-pane fade" id="fail-report">
       <div class="table-header clear">
        <c:forEach items="${complainCount3}" varStatus="i" var="c" >
         <div>${c.complain_reason}：${c.count}次</div>
        </c:forEach>
       </div>
       <div class="line addStyle"></div>
       <div>
        <table class="table"></table>
       </div>
      </div>
     </div> 

 通过给每一个需要切换子内容元素设置对应上述锚点的id｛#padding｝,并且不要忘了给外层容器加（tab-content），给子元素容器加class(tab-pane fade in active),有active的就是默认选中的。每一个子内容都有一个table元素，所以这里就是我们需要的table，切换每一个tab就会刷新显示对应的table数据。这里我们采用动态的生成table的方式加载数据。

var $table=$('.table')
function initTable(index){
  $table.bootstrapTable({
  url: '${basePath}/interacts/complain/getComplainList?pkid='+$("#pkid").val()+'&state='+index, //请求数据地址url
  height: getHeight(), //获取行高
  striped: true, //设置为 true 会有隔行变色效果
  search: true, //为true会有搜索框
  showRefresh: true, //为true有刷新按钮
  showColumns: true, //是否显示 内容列下拉框
  minimumCountColumns: 2,//当列数小于此值时，将隐藏内容列下拉框
  clickToSelect: true, //点击行是checkbox或者rediobox选中
  detailView: true, //设置为 true 可以显示详细页面模式。table第一行会有+号，点击会出现更详细的该行信息
  detailFormatter: 'detailFormatter', //格式化详细页面模式的视图。
  pagination: true, //展示有分页
  paginationLoop: false, //循环分页
  sidePagination: 'server', //设置在哪里进行分页，可选值为 'client' 或者 'server'。设置 'server'时，必须设置 服务器数据地址（url）或者重写ajax方法
  silentSort: false, //设置为 false 将在点击分页按钮时，自动记住排序项。仅在 sidePagination设置为 server时生效19   escape: true, //转义HTML字符串，替换 &, <, >, ", `, 和 ' 字符.
  searchOnEnterKey: true, //设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
  idField: 'systemId', //指定主键
  maintainSelected: true, //设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项
  toolbar: '#toolbar', //一个jQuery 选择器，指明自定义的toolbar 
  columns: [
    {field: 'complain_reason', title: '举报类型',align: 'center'},
    {field: 'nick_name', title: '举报人',align: 'center'},
    {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的所有用到的配置我都在上述代码中做了注释，想看跟详细的配置请看官网配置（http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/）。columns配置每一行，field是对应的每一列要显示的字段key值，title对应的是每一列的头部，formatter是格式化每一列的自定义函数,下面只展示时间格式化函数代码：

function timeFormat(value,row,index){
  value = row.modifyTime==null?value:row.modifyTime;
 return new Date(parseInt(value)).toLocaleString().replace(/:\d{1,2}$/,' ');
 }

对应的field为action的那一行就是操作按钮了，格式化操作按钮代码如下：

function actionFormatter(value, row, index) {
 return [
  '<a class="update" href="javascript:;" onclick="editdateAction(\'' + row.systemId + '\')" data-toggle="tooltip" title="Edit"><i class="glyphicon glyphicon-edit"></i></a>　',
  '<a class="delete" href="javascript:;" onclick="deleteRowAction(\''+row.systemId+'\')" data-toggle="tooltip" title="Remove"><i class="glyphicon glyphicon-remove"></i></a>'
 ].join('');
}

同时分页bootstrap已经提供了完整的配置（包括每页显示的行数，分页按钮，总条数和总页数等等）但是没有跳转到指定行，所以需要我们自己写他的样式定位到相应的分页栏，不过他有相关的方法提供，

selectPage就是跳到指定页，我们可以自己系一个方法：

function goPage(){
  var page=$('#pageNum').val();
  $table.bootstrapTable('selectPage',page)
 }

在用其方法时候，要$table.bootstrapTable('selectPage',page)使用。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# Bootstrap  # Table  # Bootstrap Table 删除和批量删除  # 集合Bootstrap自定义confirm提示效果  # ASP.NET MVC 使用Bootstrap的方法  # BootStrap数据表格实例代码  # bootstrap-table组合表头的实现方法  # BootStrap给table表格的每一行添加一个按钮事件  # PHP实现登录注册之BootStrap表单功能  # 详解bootstrap用dropdown-menu实现上下文菜单  # 分页  # 设置为  # 会有  # 都有  # 自定义  # 也做  # 的是  # 就会  # 下拉框  # 将在  # 我都  # 是基于  # 每页  # 我们可以  # 这样做  # 他有  # 重写  # 可选  # 想看  # 于此 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 🚀拖拽式CMS建站能否实现高效与个性化并存？  如何用IIS7快速搭建并优化网站站点？  如何在橙子建站上传落地页？操作指南详解  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  胶州企业网站制作公司,青岛石头网络科技有限公司怎么样？  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  Laravel如何处理CORS跨域请求？（配置示例）  javascript事件捕获机制【深入分析IE和DOM中的事件模型】  创业网站制作流程,创业网站可靠吗？  微信h5制作网站有哪些,免费微信H5页面制作工具？  中国移动官方网站首页入口 中国移动官网网页登录  网站制作壁纸教程视频,电脑壁纸网站？  Win11怎么关闭资讯和兴趣_Windows11任务栏设置隐藏小组件  google浏览器怎么清理缓存_谷歌浏览器清除缓存加速详细步骤  开心动漫网站制作软件下载,十分开心动画为何停播？  Laravel软删除怎么实现_Laravel Eloquent SoftDeletes功能使用教程  宙斯浏览器文件分类查看教程 快速筛选视频文档与图片方法  深入理解Android中的xmlns:tools属性  百度输入法全感官ai怎么关 百度输入法全感官皮肤关闭  如何快速查询网址的建站时间与历史轨迹？  详解MySQL数据库的安装与密码配置  夸克浏览器网页跳转延迟怎么办 夸克浏览器跳转优化  如何在香港服务器上快速搭建免备案网站？  米侠浏览器网页图片不显示怎么办 米侠图片加载修复  大型企业网站制作流程,做网站需要注册公司吗？  装修招标网站设计制作流程,装修招标流程？  Laravel如何创建自定义Facades？（详细步骤）  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤  Android 常见的图片加载框架详细介绍  Laravel Telescope怎么调试_使用Laravel Telescope进行应用监控与调试  Win11任务栏卡死怎么办 Windows11任务栏无反应解决方法【教程】  Laravel如何使用Guzzle调用外部接口_Laravel发起HTTP请求与JSON数据解析【详解】  如何在万网ECS上快速搭建专属网站？  Google浏览器为什么这么卡 Google浏览器提速优化设置步骤【方法】  Midjourney怎样加参数调细节_Midjourney参数调整技巧【指南】  Java垃圾回收器的方法和原理总结  宙斯浏览器怎么屏蔽图片浏览 节省手机流量使用设置方法  PHP 500报错的快速解决方法  php结合redis实现高并发下的抢购、秒杀功能的实例  Laravel队列任务超时怎么办_Laravel Queue Timeout设置详解  原生JS实现图片轮播切换效果  HTML透明颜色代码在Angular里怎么设置_Angular透明颜色使用指南【详解】  如何在阿里云高效完成企业建站全流程？  Laravel Eloquent模型如何创建_Laravel ORM基础之Model创建与使用教程  智能起名网站制作软件有哪些,制作logo的软件？  香港服务器WordPress建站指南：SEO优化与高效部署策略  使用C语言编写圣诞表白程序  米侠浏览器网页背景异常怎么办 米侠显示修复  晋江文学城电脑版官网 晋江文学城网页版直接进入  如何在阿里云ECS服务器部署织梦CMS网站？