JSFiddle - React, Tailwind, and code Playground

by wenyi

HTML

<link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.css">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.12.1/bootstrap-table.js"></script>
<div class="tabs-container">
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">表格1</a>
    </li>

  </ul>
  <div class="tab-content">
    <div id="tab-1" class="tab-pane active">
      <div class="panel-body">
        <!-- Example Events -->
        <table id="exampleTableFromData" class="table" data-mobile-responsive="true">
        </table>
        <!-- End Example Events -->
      </div>
    </div>

  </div>
</div>

CSS

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

JavaScript

/*表格使用方法*/
 var tableHeight = document.body.clientHeight; //动态判断窗口高度
 (function() {
    var bt_data = [{"CheckDetailGuid":"932D21BD-1FCB-40E5-898A-E09519924685","CheckGuid":"9f830385-d63e-4e87-bbc7-41e323d4bc27","StockGuid":"BD43193C-9423-469D-BB97-11396311C45A","s_PackageNo":"PK20180529000042","s_OriginalPackageNo":"71","s_ProductName":"ICND2038S","s_PackageNumber":30000,"s_DateCode":"1814","s_LotNo":"B09772GA","s_BIN":"BIN1","s_AreaName":"TP-SZ1-A03","PackageNo":"PK20180529000042","OriginalPackageNo":"71","ProductName":"ICND2038S","PackageNumber":30000,"DateCode":"1814","LotNo":"B09772GA","BIN":"BIN1","AreaName":"TP-SZ1-A03","IsUpdateArea":0,"Remark":"","CreateUserGuid":"01CCA69A-CBF1-4DB6-A928-75FB7D7DAF65","CreateDate":"2018-07-02 16:39:14","ModifyUserGuid":"","ModifyDate":"0001-01-01 00:00:00"},{"CheckDetailGuid":"FB990615-053A-4DBB-AA28-F163094510DF","CheckGuid":"9f830385-d63e-4e87-bbc7-41e323d4bc27","StockGuid":"AB33FC8D-D722-4247-9EAC-039EA05A2225","s_PackageNo":"PK20180529000039","s_OriginalPackageNo":"6","s_ProductName":"ICND2038S","s_PackageNumber":30000,"s_DateCode":"1814","s_LotNo":"B09769GA","s_BIN":"BIN1","s_AreaName":"TP-SZ1-A03","PackageNo":"PK20180529000039","OriginalPackageNo":"6","ProductName":"ICND2038S","PackageNumber":30000,"DateCode":"1814","LotNo":"B09769GA","BIN":"BIN1","AreaName":"TP-SZ1-A03","IsUpdateArea":0,"Remark":"","CreateUserGuid":"01CCA69A-CBF1-4DB6-A928-75FB7D7DAF65","CreateDate":"2018-07-02 16:39:13","ModifyUserGuid":"","ModifyDate":"0001-01-01...