獅哥哥 三日不寫Code面目可憎

引用的檔案：

<link rel="stylesheet" href="bootstrap.min.css">
<link rel="stylesheet" href="bootstrap-table.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-table.js"></script>

HTML：

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

Javascript：

$('#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 '  每頁顯示' + pageSize + '筆';
  },
  formatShowingRows:function(fromIndex, toIndex, totalSize) {
    //目前第幾頁
    var currentPage = Math.ceil(fromIndex / this.pageSize);
    //總共幾頁
    var totalPageCount = Math.ceil(totalSize / this.pageSize);
    return '第'+currentPage+'頁  共'+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;
}