前端開發：bootstrap-table.js的中文化設定

bootstrap-table.js 是一個以bootstrap為基礎的表格外掛。可以對表格的資料進行排序、分頁、查詢等等。

這篇文章要簡單的介紹如何設定bootstrap-table.js的中文化

 

因為bootstrap-table.js是以bootstrap為基礎開發的套件，因為我們必須先載入bootstrap。另外bootstrap-table使用了font awesome作為預設的圖標，因此我們也需要找入font awesome.

匯入CSS

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">

匯入Javascript

 <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>

bootstrap table js 預設是英文語言包，我們可以通過以下方法來進行中文化的設置，比如分頁、加載進度條的中文提示。

 

方法一：直接載入中文語言包js

戴入bootstrap-table.min.js之後、緊接著載入bootstrap-table-zh-TW.min.js

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

 

方法二：使用data-locale標籤做設定

先載入所有的語言包、再使用data-locale標籤做設定

js

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

HTML

<table data-toggle="table" data-locale="en-US">
    ------
</table>

 

方法三：使用js做設定

先載入所有的語言包、再使用js做設定

先載入語言包

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

使用js做設定

$('#table').bootstrapTable({ locale: 'en-US' })

 

方法四：自定義語言

不加載語言包、使用自定義的方式設定：

$('#table').bootstrapTable({
          //自定義分頁字串顯示為中文
          formatShowingRows:function(pageFrom, pageTo, totalRows)
          {
            return "第"+pageFrom+"-"+pageTo+"行，總共"+totalRows+"";
          },
           //自定義分頁字串顯示為中文
          formatRecordsPerPage:function(pageNumber)
          {
            return pageNumber+'行每頁';
          }
  });

還有更多進階的使用方法，你可以參考官網的範例： https://examples.bootstrap-table.com/

 

今天的文章分享就到這裡啦！知道如何設定中文化了嗎！喜歡歐斯瑞文章的讀者們，記得追蹤我們的FB粉絲團及IG，也別忘了訂閱電子報，隨時掌握第一手最新資訊呦！有任何問題，也歡迎聯繫我們～