Bootstrap Table快速完美搭建后台管理系统

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>