Bootstrap-Table 套件筆記

官方網站

點我前往

官方說明文件

點我前往

官方使用範例

點我前往

使用筆記

指定語系

點我前往查看資訊

上面這個頁面提供目前所支援的語系JS檔案和國籍代碼

調用方式 - 方法 1 (直接引入語言包)

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/locale/bootstrap-table-zh-TW.min.js"></script>

調用方式 - 方法 2 (使用data-locale方式)

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.19.1/bootstrap-table-locale-all.min.js" integrity="sha512-bX1ufoQUnGBUhPxsIDCkgsfOrPVU2vv5l+4lP3XnAtve4PSEnNHP6b0dA889eiaDxlxQqn2KJobJ4pzy4V03rw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> 

<div class="card-body">
    <div class="tab_container">
        <div id="tab1" class="tab_content">
            <table
                id = "table"
                data-locale="zh-TW"
                data-toolbar="#toolbar"
                data-ajax="ajaxRequest"
                data-toggle="table"
                data-search="false"
                data-side-pagination="server"
                data-pagination="true"
                data-click-to-select="true"
                data-pagination-parts="['pageList','pageSize','pageInfo']"
                data-pagination-h-align="left"
                data-page-list="[5, 10, 15, 20, 25, 30, All]"
                data-query-params-type=""
                data-query-params="queryParams"
                >
                <thead>
                    <tr>
                        <th data-checkbox="true" class="text-left"></th>
                        <th data-field="store_name" style="width:22%;" class="text-left" > <?=lang('分店名稱'); ?></th>
                        <th data-field="allotment_info" style="width:22%;" class="text-left" data-formatter="formatterLinePostInfo">貼文派發資訊</th>
                        <th class="text-left" data-field="allotment_info" data-formatter="formatterAllotmentInfo">商品派發資訊</th>
                        <th class="text-left" data-field="allotment_start_time">排程啟動時間</th>
                        <th class="text-left" data-field="allotment_end_time">排程結束時間</th>
                        <th class="text-left" data-field="allotment_status" data-formatter="formatterAllotmentStatus">派發狀態</th>
                        <th class="text-left" data-field="store_number" data-formatter="formatterOperate">操作</th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>
</div>

上方網站找到想要語系代碼，然後更改 data-locale 的值，改成你想要的語系

配合套件的分頁，在實作時後端吐給前端的分頁寫法

<?php
    $limit = $pageSize;
    $offset = ($pageNumber-1) * $pageSize;
    $search->limit($limit,$offset);

如何將表格內的CheckBox設定為禁用

<table
      id = "table"
      data-locale="zh-TW"
      data-toolbar="#toolbar"
      data-ajax="ajaxRequest"
      data-toggle="table"
      data-search="false"
      data-side-pagination="server"
      data-pagination="true"
      data-click-to-select="true"
      data-pagination-parts="['pageList','pageSize','pageInfo']"
      data-pagination-h-align="left"
      data-page-size="30"
      data-page-list="[5, 10, 15, 20, 25, 30, All]"
      data-query-params-type=""
      data-query-params="queryParams"
      >
      <thead>
          <tr>
              <th data-checkbox="true" class="text-left" data-field="id" data-formatter="formatterCheckStatus"></th>
              <th data-field="store_name" style="width:22%;" class="text-left" > <?=lang('分店名稱'); ?></th>
              <th data-field="allotment_info" style="width:22%;" class="text-left" data-formatter="formatterLinePostInfo">貼文派發資訊</th>
              <th class="text-left" data-field="allotment_info" data-formatter="formatterAllotmentInfo">商品派發資訊</th>
              <th class="text-left" data-field="allotment_start_time">排程啟動時間</th>
              <th class="text-left" data-field="allotment_end_time">排程結束時間</th>
              <th class="text-left" data-field="allotment_status" data-formatter="formatterAllotmentStatus">派發狀態</th>
              <th class="text-left" data-field="store_number" data-formatter="formatterOperate">操作</th>
          </tr>
      </thead>
  </table>

function formatterCheckStatus(value,row){
    return {
        disabled : disabled,//設定是否可用
        checked : false//設定選中
    }
}

刷新整個表格資料

基本用法

$('#table').bootstrapTable('refresh');

添加額外參數

$('#table').bootstrapTable('refresh', {pageNumber:1});

上面這個會在刷新表單的時候，強制將分頁指定在第一頁

當回傳的資料跟預期的不一樣

JS

function formatterCheckStatus(value,row){
        return {
            disabled : true,
            checked : false
        }
    }

在欄位有綁定對應data-field 如果後面又使用 data-formatter 格式化某個值，並且使用JS 函數回傳 JSON ，將會影響，後面其他使用data-formatter 函數的值

更新某一行的內容

$('#table').bootstrapTable('updateRow', {
                        index: index, //該欄位在哪一個位置索引
                        replace:true,
                        row: response.data //要替換的行內容，要跟列表的行內容結構相同才行，要不然會報錯
});

補充 - replace 參數 treu和false的差異性說明

可選項，新的數據對象是否替換舊的對象，設定true直接替換，設定false合併對象，預設為false

說簡單一點就是設定true，表格內的data不會刷新，不設定則會，不刷新會造成的問題為下次再透過表格元素拿資料會是舊的

取得checkbox勾選的項目

let table = $('#table');
let list = table.bootstrapTable('getSelections'); #即可回傳選擇的項目

獲取表格資料的方式

舊版本

//只獲取目前頁的數據,比如有10頁數據，目前一頁只獲取第一頁的數據
var data= $('#table').bootstrapTable('getData',true);
//獲取包含分頁的數據，比如有10頁數據，獲取全部10頁的數據
var data= $('#table').bootstrapTable('getData',false);

新版本

//只獲取目前頁的數據,包含隱藏行
var data= $('#table').bootstrapTable('getData',{useCurrentPage:true,includeHiddenRows:true});
//獲取包含分頁的全部數據，但是不包含隱藏行的數據
var data= $('#table').bootstrapTable('getData',{useCurrentPage:false,includeHiddenRows:false});

參數名稱	參數說明
useCurrentPage	設定為true獲取目前頁碼的數據；設定為false獲取表格全部頁碼的數據
includeHiddenRows	設定true包含隱藏行的數據；設定false不包含隱藏行的數據