BootStrap中Table 分頁外掛 bootstrapTable.js @ Lung-Yu,Tsai 的部落格

bootstrapTable.js 是一個表格的外掛功能，將常見的表格功能加以實現的一個套件模組。

首先將相關會使用的檔案參考至專案之中:

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/bootstrap-table@1.15.5/dist/bootstrap-table.min.css">

script:

<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/bootstrap-table@1.15.5/dist/bootstrap-table.min.js"></script>

HTML Body:

<table id="demo"></table>

table id 的 demo 需與 Java Script 中的 #demo 進行對應。

最後在網頁的下方放置Java Script 讓其建立表格(此處範例是本地端可以直接執行測試):

$('#demo').bootstrapTable({
  columns:[ //欄位設定
    {field:'checkbox', title:'選取', align:'center', width:80, visible:true, checkbox:true},
    {field:'id', title:'代號', align:'center', width:120, visible:true, sortable:true},
    {field:'name', title:'名稱', align:'left', visible:true},
    {field:'mailAddress', title:'Email', align:'left', width:200, visible:true},
    {field:'description', title:'說明', align:'left', width:200, visible:true}
  ],
  classes:'table',
  data : getRandomData(),//所有資料
  uniqueId:'id', //哪一個欄位是key
  sortName:'name', //依照那個欄位排序			
  height : 450,
  pagination : true, //使否要分頁

  //可於ToolBar上顯示的按鈕
  showColumns : true, //顯示/隱藏哪些欄位
  showToggle : true, //名片式/table式切換
  showPaginationSwitch : true, //分頁/不分頁切換
  showRefresh : true, //重新整理
  search : true, //查詢

  onPageChange:function(currentPage, pageSize) {
    console.log("目前頁數:"+currentPage+",一頁顯示:"+pageSize+"筆");
  },
  pageSize : 10, //一頁顯示幾筆
  pageList : [ 10, 20, 50, 100], //一頁顯示幾筆的選項

  formatRecordsPerPage:function(pageSize) {
    return '&nbsp;&nbsp;每頁顯示' + pageSize + '筆';
  },
  formatShowingRows:function(fromIndex, toIndex, totalSize) {
    //目前第幾頁
    var currentPage = Math.ceil(fromIndex / this.pageSize);
    //總共幾頁
    var totalPageCount = Math.ceil(totalSize / this.pageSize);
    return '第'+currentPage+'頁&nbsp;&nbsp;共'+totalPageCount+'頁';
  }	
});

function getRandomData() {
  var data = [];
  for (var i = 0; i < 50; i++) {
    data.push({
      id: "ID_"+i,
      name: 'Name_' + i,
      mailAddress : "ID_"+i+"@ooooo.com",
      description : "" 
    });
  }
  return data;
}

---

以下範例是透過HTTP GET ，取得後端資料後進行顯示(因有請求上的權限問題，以下程式碼請放置於Web Server):

<script>
    $.get("/test.json", function (raw_data, status) {
        $('#demo').bootstrapTable({
            columns: [ //欄位設定
                { field: 'Device', title: '設備', align: 'center', width: 120, visible: true, sortable: true },
                { field: 'PM1', title: 'PM1', align: 'center', width: 120, visible: true, sortable: true },
                { Field: 'PM25', title: 'PM2.5', align: 'center', width: 120, visible: true, sortable: true },
                { field: 'PM100', title: 'PM10', align: 'left', visible: true },
                { field: 'UV', title: 'UV', align: 'left', width: 200, visible: true },
                { field: 'Time', title: '時間', align: 'left', width: 200, visible: true }
            ],
            classes: 'table',
            data: raw_data,//所有資料
            uniqueId: 'id', //哪一個欄位是key
            sortName: 'name', //依照那個欄位排序			
            height: 450,
            pagination: true, //使否要分頁
            //可於ToolBar上顯示的按鈕
            showColumns: true, //顯示/隱藏哪些欄位
            showToggle: true, //名片式/table式切換
            showPaginationSwitch: true, //分頁/不分頁切換
            showRefresh: true, //重新整理
            search: true, //查詢
            onPageChange: function (currentPage, pageSize) {
                console.log("目前頁數:" + currentPage + ",一頁顯示:" + pageSize + "筆");
            },
            pageSize: 5, //一頁顯示幾筆
            pageList: [10, 20, 50, 100], //一頁顯示幾筆的選項
            formatRecordsPerPage: function (pageSize) {
                return '&nbsp;&nbsp;每頁顯示' + pageSize + '筆';
            },
            formatShowingRows: function (fromIndex, toIndex, totalSize) {
                //目前第幾頁
                var currentPage = Math.ceil(fromIndex / this.pageSize);
                //總共幾頁
                var totalPageCount = Math.ceil(totalSize / this.pageSize);
                return '第' + currentPage + '頁&nbsp;&nbsp;共' + totalPageCount + '頁';
            }
        })
    });
</script>