網站：https://examples.bootstrap-table.com/
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, Bootstrap Table!</title>
<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="<https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css>">
<link rel="stylesheet" href="<https://unpkg.com/[email protected]/dist/bootstrap-table.min.css>">
</head>
<body>
<div class="container mt-5">
<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>
</div>
</div>
<script src="<https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js>"></script>
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="<https://unpkg.com/[email protected]/dist/bootstrap-table.min.js>"></script>
<!-- 2.調用bootstrapTable函式 -->
<script>
$('#table').bootstrapTable({
//classes:'table',
toolbar: '#toolbar',
uniqueId: '0', //哪一個欄位是key
sortName: '0', //依照那個欄位排序
height: 400, //設定高度
pagination: true, //使否要分頁
//可於ToolBar上顯示的按鈕
showColumns: false, //顯示/隱藏哪些欄位
showToggle: false, //名片式/table式切換
showPaginationSwitch: false, //分頁/不分頁切換
showRefresh: false, //重新整理
search: true, //查詢
onPageChange: function(currentPage, pageSize) {
console.log("目前頁數: " + currentPage + " ,一頁顯示: " + pageSize + " 筆");
},
pageSize: 10, //一頁顯示幾筆
pageList: [10, 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>
</body>
</html>