育將電腦工作室 - 線上書籍

網頁前端設計工程師培訓班
============

<span style="font-size: 1.13rem;">因為bootstrap-table.js是以bootstrap為基礎開發的套件，因為我們必須先載入bootstrap。另外bootstrap-table使用了font awesome作為預設的圖標，因此我們也需要找入font awesome。</span>

1. 官網：<https://bootstrap-table.com/>
2. 引入 CSS、JS 
  ```javascript
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css">
  ```
  
   
  ```javascript
  <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
  ```
  
  語系
  
   
  ```javascript
  <script src="https://unpkg.com/bootstrap-table@1.19.1/dist/locale/bootstrap-table-zh-TW.min.js"></script>
  ```
3. 調用函式 
  ```javascript
  <script>
    $('#table').bootstrapTable({
      // {field:'checkbox', title:'選取', align:'center', width:80, visible:true, checkbox:true},    
      //classes:'table',
      toolbar: '#toolbar',
      uniqueId:'', //哪一個欄位是key
      sortName:'', //依照那個欄位排序
      sortOrder:'',
      // height : 450,
      pagination : false, //使否要分頁
  
      //可於ToolBar上顯示的按鈕
      showColumns : false, //顯示/隱藏哪些欄位
      showToggle : false, //名片式/table式切換
      showPaginationSwitch : false, //分頁/不分頁切換
      showRefresh : false, //重新整理
      search : true, //查詢
  
      onPageChange:function(currentPage, pageSize) {
        //console.log("目前頁數: "+currentPage+" ,一頁顯示: "+pageSize+" 筆");
      },
      pageSize : 20, //一頁顯示幾筆
      pageList : [ 20, 50, 100, 200], //一頁顯示幾筆的選項
      formatRecordsPerPage:function(pageSize) {
        return '  每頁顯示 ' + pageSize + ' 筆';
      },
      formatShowingRows:function(fromIndex, toIndex, totalSize) {
        //目前第幾頁
        var currentPage = Math.ceil(fromIndex / this.pageSize);
        //總共幾頁
        var totalPageCount = Math.ceil(totalSize / this.pageSize);
        return '第 '+currentPage+' 頁  共 '+totalPageCount+' 頁';
      }	
    });
    
  </script>
  ```
4. HTML 
  ```javascript
   <div id="main"> 
          <div id="toolbar">
            <div class="h2">bootstrap-table</div>
          </div>
          <table id="table" class="table-sm">  
            <thead>
              <tr>
                <th data-field='0' data-sortable='true' data-align='center' data-width='100' data-visible='true'>序</th>
                <th data-field='1' data-sortable='true' data-align='center' data-width='' data-visible='true'>類別</th>
                <th data-field='2' data-sortable='true' data-align='left' data-width='' data-visible='true'>標題</th>
                <th data-field='3' data-sortable='false' data-align='center' data-width='150' data-visible='true'>連結</th>
              </tr>
            </thead>
            <tbody class="table_container">
              <tr><td>內容0-0</td><td>內容0-1</td><td>內容0-2</td><td>內容0-3</td></tr>
              <tr><td>內容1-0</td><td>內容1-1</td><td>內容1-2</td><td>內容1-3</td></tr>
              <tr><td>內容2-0</td><td>內容2-1</td><td>內容2-2</td><td>內容2-3</td></tr>
              <tr><td>內容3-0</td><td>內容3-1</td><td>內容3-2</td><td>內容3-3</td></tr>
              <tr><td>內容4-0</td><td>內容4-1</td><td>內容4-2</td><td>內容4-3</td></tr>
              <tr><td>內容5-0</td><td>內容5-1</td><td>內容5-2</td><td>內容5-3</td></tr>
              <tr><td>內容6-0</td><td>內容6-1</td><td>內容6-2</td><td>內容6-3</td></tr>
              <tr><td>內容7-0</td><td>內容7-1</td><td>內容7-2</td><td>內容7-3</td></tr>
              <tr><td>內容8-0</td><td>內容8-1</td><td>內容8-2</td><td>內容8-3</td></tr>
              <tr><td>內容9-0</td><td>內容9-1</td><td>內容9-2</td><td>內容9-3</td></tr>
              <tr><td>內容10-0</td><td>內容10-1</td><td>內容10-2</td><td>內容10-3</td></tr>
              <tr><td>內容11-0</td><td>內容11-1</td><td>內容11-2</td><td>內容11-3</td></tr>
              <tr><td>內容12-0</td><td>內容12-1</td><td>內容12-2</td><td>內容12-3</td></tr>
              <tr><td>內容13-0</td><td>內容13-1</td><td>內容13-2</td><td>內容13-3</td></tr>
              <tr><td>內容14-0</td><td>內容14-1</td><td>內容14-2</td><td>內容14-3</td></tr>
              <tr><td>內容15-0</td><td>內容15-1</td><td>內容15-2</td><td>內容15-3</td></tr>
              <tr><td>內容16-0</td><td>內容16-1</td><td>內容16-2</td><td>內容16-3</td></tr>
              <tr><td>內容17-0</td><td>內容17-1</td><td>內容17-2</td><td>內容17-3</td></tr>
              <tr><td>內容18-0</td><td>內容18-1</td><td>內容18-2</td><td>內容18-3</td></tr>
              <tr><td>內容19-0</td><td>內容19-1</td><td>內容19-2</td><td>內容19-3</td></tr>
              <tr><td>內容20-0</td><td>內容20-1</td><td>內容20-2</td><td>內容20-3</td></tr>
              <tr><td>內容21-0</td><td>內容21-1</td><td>內容21-2</td><td>內容21-3</td></tr>
              <tr><td>內容22-0</td><td>內容22-1</td><td>內容22-2</td><td>內容22-3</td></tr>
              <tr><td>內容23-0</td><td>內容23-1</td><td>內容23-2</td><td>內容23-3</td></tr>
              <tr><td>內容24-0</td><td>內容24-1</td><td>內容24-2</td><td>內容24-3</td></tr>
              <tr><td>內容25-0</td><td>內容25-1</td><td>內容25-2</td><td>內容25-3</td></tr>
              <tr><td>內容26-0</td><td>內容26-1</td><td>內容26-2</td><td>內容26-3</td></tr>
              <tr><td>內容27-0</td><td>內容27-1</td><td>內容27-2</td><td>內容27-3</td></tr>
              <tr><td>內容28-0</td><td>內容28-1</td><td>內容28-2</td><td>內容28-3</td></tr>
              <tr><td>內容29-0</td><td>內容29-1</td><td>內容29-2</td><td>內容29-3</td></tr>
              <tr><td>內容30-0</td><td>內容30-1</td><td>內容30-2</td><td>內容30-3</td></tr>
              <tr><td>內容31-0</td><td>內容31-1</td><td>內容31-2</td><td>內容31-3</td></tr>
              <tr><td>內容32-0</td><td>內容32-1</td><td>內容32-2</td><td>內容32-3</td></tr>
              <tr><td>內容33-0</td><td>內容33-1</td><td>內容33-2</td><td>內容33-3</td></tr>
              <tr><td>內容34-0</td><td>內容34-1</td><td>內容34-2</td><td>內容34-3</td></tr>
              <tr><td>內容35-0</td><td>內容35-1</td><td>內容35-2</td><td>內容35-3</td></tr>
              <tr><td>內容36-0</td><td>內容36-1</td><td>內容36-2</td><td>內容36-3</td></tr>
              <tr><td>內容37-0</td><td>內容37-1</td><td>內容37-2</td><td>內容37-3</td></tr>
              <tr><td>內容38-0</td><td>內容38-1</td><td>內容38-2</td><td>內容38-3</td></tr>
              <tr><td>內容39-0</td><td>內容39-1</td><td>內容39-2</td><td>內容39-3</td></tr>
              <tr><td>內容40-0</td><td>內容40-1</td><td>內容40-2</td><td>內容40-3</td></tr>
              <tr><td>內容41-0</td><td>內容41-1</td><td>內容41-2</td><td>內容41-3</td></tr>
              <tr><td>內容42-0</td><td>內容42-1</td><td>內容42-2</td><td>內容42-3</td></tr>
              <tr><td>內容43-0</td><td>內容43-1</td><td>內容43-2</td><td>內容43-3</td></tr>
              <tr><td>內容44-0</td><td>內容44-1</td><td>內容44-2</td><td>內容44-3</td></tr>
              <tr><td>內容45-0</td><td>內容45-1</td><td>內容45-2</td><td>內容45-3</td></tr>
              <tr><td>內容46-0</td><td>內容46-1</td><td>內容46-2</td><td>內容46-3</td></tr>
              <tr><td>內容47-0</td><td>內容47-1</td><td>內容47-2</td><td>內容47-3</td></tr>
              <tr><td>內容48-0</td><td>內容48-1</td><td>內容48-2</td><td>內容48-3</td></tr>
              <tr><td>內容49-0</td><td>內容49-1</td><td>內容49-2</td><td>內容49-3</td></tr>
              <tr><td>內容50-0</td><td>內容50-1</td><td>內容50-2</td><td>內容50-3</td></tr>
              <tr><td>內容51-0</td><td>內容51-1</td><td>內容51-2</td><td>內容51-3</td></tr>
              <tr><td>內容52-0</td><td>內容52-1</td><td>內容52-2</td><td>內容52-3</td></tr>
              <tr><td>內容53-0</td><td>內容53-1</td><td>內容53-2</td><td>內容53-3</td></tr>
              <tr><td>內容54-0</td><td>內容54-1</td><td>內容54-2</td><td>內容54-3</td></tr>
              <tr><td>內容55-0</td><td>內容55-1</td><td>內容55-2</td><td>內容55-3</td></tr>
              <tr><td>內容56-0</td><td>內容56-1</td><td>內容56-2</td><td>內容56-3</td></tr>
              <tr><td>內容57-0</td><td>內容57-1</td><td>內容57-2</td><td>內容57-3</td></tr>
              <tr><td>內容58-0</td><td>內容58-1</td><td>內容58-2</td><td>內容58-3</td></tr>
              <tr><td>內容59-0</td><td>內容59-1</td><td>內容59-2</td><td>內容59-3</td></tr>
              <tr><td>內容60-0</td><td>內容60-1</td><td>內容60-2</td><td>內容60-3</td></tr>
              <tr><td>內容61-0</td><td>內容61-1</td><td>內容61-2</td><td>內容61-3</td></tr>
              <tr><td>內容62-0</td><td>內容62-1</td><td>內容62-2</td><td>內容62-3</td></tr>
              <tr><td>內容63-0</td><td>內容63-1</td><td>內容63-2</td><td>內容63-3</td></tr>
              <tr><td>內容64-0</td><td>內容64-1</td><td>內容64-2</td><td>內容64-3</td></tr>
              <tr><td>內容65-0</td><td>內容65-1</td><td>內容65-2</td><td>內容65-3</td></tr>
              <tr><td>內容66-0</td><td>內容66-1</td><td>內容66-2</td><td>內容66-3</td></tr>
              <tr><td>內容67-0</td><td>內容67-1</td><td>內容67-2</td><td>內容67-3</td></tr>
              <tr><td>內容68-0</td><td>內容68-1</td><td>內容68-2</td><td>內容68-3</td></tr>
              <tr><td>內容69-0</td><td>內容69-1</td><td>內容69-2</td><td>內容69-3</td></tr>
              <tr><td>內容70-0</td><td>內容70-1</td><td>內容70-2</td><td>內容70-3</td></tr>
              <tr><td>內容71-0</td><td>內容71-1</td><td>內容71-2</td><td>內容71-3</td></tr>
              <tr><td>內容72-0</td><td>內容72-1</td><td>內容72-2</td><td>內容72-3</td></tr>
              <tr><td>內容73-0</td><td>內容73-1</td><td>內容73-2</td><td>內容73-3</td></tr>
              <tr><td>內容74-0</td><td>內容74-1</td><td>內容74-2</td><td>內容74-3</td></tr>
              <tr><td>內容75-0</td><td>內容75-1</td><td>內容75-2</td><td>內容75-3</td></tr>
              <tr><td>內容76-0</td><td>內容76-1</td><td>內容76-2</td><td>內容76-3</td></tr>
              <tr><td>內容77-0</td><td>內容77-1</td><td>內容77-2</td><td>內容77-3</td></tr>
              <tr><td>內容78-0</td><td>內容78-1</td><td>內容78-2</td><td>內容78-3</td></tr>
              <tr><td>內容79-0</td><td>內容79-1</td><td>內容79-2</td><td>內容79-3</td></tr>
              <tr><td>內容80-0</td><td>內容80-1</td><td>內容80-2</td><td>內容80-3</td></tr>
              <tr><td>內容81-0</td><td>內容81-1</td><td>內容81-2</td><td>內容81-3</td></tr>
              <tr><td>內容82-0</td><td>內容82-1</td><td>內容82-2</td><td>內容82-3</td></tr>
              <tr><td>內容83-0</td><td>內容83-1</td><td>內容83-2</td><td>內容83-3</td></tr>
              <tr><td>內容84-0</td><td>內容84-1</td><td>內容84-2</td><td>內容84-3</td></tr>
              <tr><td>內容85-0</td><td>內容85-1</td><td>內容85-2</td><td>內容85-3</td></tr>
              <tr><td>內容86-0</td><td>內容86-1</td><td>內容86-2</td><td>內容86-3</td></tr>
              <tr><td>內容87-0</td><td>內容87-1</td><td>內容87-2</td><td>內容87-3</td></tr>
              <tr><td>內容88-0</td><td>內容88-1</td><td>內容88-2</td><td>內容88-3</td></tr>
              <tr><td>內容89-0</td><td>內容89-1</td><td>內容89-2</td><td>內容89-3</td></tr>
              <tr><td>內容90-0</td><td>內容90-1</td><td>內容90-2</td><td>內容90-3</td></tr>
              <tr><td>內容91-0</td><td>內容91-1</td><td>內容91-2</td><td>內容91-3</td></tr>
              <tr><td>內容92-0</td><td>內容92-1</td><td>內容92-2</td><td>內容92-3</td></tr>
              <tr><td>內容93-0</td><td>內容93-1</td><td>內容93-2</td><td>內容93-3</td></tr>
              <tr><td>內容94-0</td><td>內容94-1</td><td>內容94-2</td><td>內容94-3</td></tr>
              <tr><td>內容95-0</td><td>內容95-1</td><td>內容95-2</td><td>內容95-3</td></tr>
              <tr><td>內容96-0</td><td>內容96-1</td><td>內容96-2</td><td>內容96-3</td></tr>
              <tr><td>內容97-0</td><td>內容97-1</td><td>內容97-2</td><td>內容97-3</td></tr>
              <tr><td>內容98-0</td><td>內容98-1</td><td>內容98-2</td><td>內容98-3</td></tr>
              <tr><td>內容99-0</td><td>內容99-1</td><td>內容99-2</td><td>內容99-3</td></tr>
            </tbody>
          </table>
  ```
5.

Title1

Title2

Title3

Title1

Title2

Title3

MarkDown