<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/locale/bootstrap-table-zh-TW.min.js"></script>
<!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>
<!-- bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- bootstrap-icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
<!-- bootstrap-table -->
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css">
<!-- jquery -->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<!-- bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<!-- bootstrap-table -->
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/locale/bootstrap-table-zh-TW.min.js"></script>
</head>
<body>
<div class="container mt-5">
<table data-toggle="table">
<thead>
<tr>
<th>Item ID</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
// bootstrap-table
Route.path("bt", bt);
prog_api.gs => bt(e)
function bt(e) {
let title = 'Bootstrap-table';
let content = '';
content = `<h2 class='mt-3'>${title}</h2>`;
return render('bt', {content: content}, title);
}
<li><a class="dropdown-item" href="<?= global.url ?>?op=bt" target="_blank">Bootstrap-table</a></li>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/locale/bootstrap-table-zh-TW.min.js"></script>
<table data-toggle="table">
<thead>
<tr>
<th>Item ID</th>
<th>Item Name</th>
<th>Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Item 1</td>
<td>$1</td>
</tr>
<tr>
<td>2</td>
<td>Item 2</td>
<td>$2</td>
</tr>
</tbody>
</table>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/locale/bootstrap-table-zh-TW.min.js"></script>
<!-- 流水號 客戶名稱 客戶電話 客戶地址 備註 -->
<table data-toggle="table">
<thead>
<tr>
<th>流水號</th>
<th>客戶名稱</th>
<th>客戶電話</th>
<th>客戶地址</th>
<th>備註</th>
</tr>
</thead>
<tbody>
<!-- 1 育將電腦 123456789 台南市永康區大灣路158號 備註1 -->
<tr>
<td>1</td>
<td>育將電腦</td>
<td>123456789</td>
<td>台南市永康區大灣路158號</td>
<td>備註1</td>
</tr>
</tbody>
</table>
/*========================================
客戶資料 查詢
=========================================*/
function custom(e){
let title = '客戶管理';
let content = '';
content = `<h2 class='mt-3'>${title}</h2>`;
// 調用 custom 子樣版
content += render('custom', {});
return render('tmp', {content: content}, title);
}
/*========================================
客戶資料 查詢
=========================================*/
function custom(e){
let title = '客戶管理';
let content = '';
content = `<h2 class='mt-3'>${title}</h2>`;
// 調用 custom 子樣版
let stru = get_stru_custom();
let rows = get_data_custom();
content += render('custom', {stru: stru, rows: rows});
return render('tmp', {content: content}, title);
}
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.22.1/dist/locale/bootstrap-table-zh-TW.min.js"></script>
<!-- 流水號 客戶名稱 客戶電話 客戶地址 備註 -->
<table data-toggle="table">
<thead>
<tr>
<? for(let i in stru){ ?>
<th><?= stru[i]['title']?></th>
<? } ?>
</tr>
</thead>
<tbody>
<!-- 1 育將電腦 123456789 台南市永康區大灣路158號 備註1 -->
<? for(let i in rows){ ?>
<tr>
<? for(let j in rows[i]){?>
<td><?= rows[i][j] ?></td>
<? } ?>
</tr>
<? } ?>
</tbody>
</table>