11. Bootstrap Table(一)
12. Bootstrap Table(二)
調用Bootstrap-table
- 上個單元，是使用它的啟始模版，在 table 設定 「data-toggle="table"」屬性，即可調用
- 本單元則是從 js來調用 $("#table").bootstrapTable({})
- 首先在 table 設定 id='table'
- th屬性
<thead> <tr> <? for(let i in stru){ ?> <th data-field='<?= stru[i]['title']?>' data-sortable='true' data-align='left' data-width='' data-visible='true' > <?= stru[i]['title']?> </th> <? } ?> <th data-field='operate' data-sortable='false' data-align='center' data-width='150' data-clickToSelect='false' data-events='window.operateEvents' data-formatter='operateFormatter'> <a href="<?= global['url'] ?>?op=form_custom" class="" title='新增'> <i class="bi bi-file-earmark-plus"></i> </a> </th> </tr> </thead>函式屬性，可以放在 html中，例 data-field 如果放在 js 則用 field
data-field：欄位名稱
data-sortable：是否排序 true false
data-align：水平對齊 left center right
data-width：欄位寬度，單位 px
data-visible：欄位是否出現
data-events：按鈕事件，調用的 windows.xxx =>必在 放在「$("#table").bootstrapTable({})」前面
data-formatter：按鈕
window.operateEvents = { 'click .show': function (e, value, row, index) {//顯示單筆 alert('查詢');// }, 'click .edit': function (e, value, row, index) { top.location.href='<?= global.url ?>?op=form_custom&&sn='+row[0] }, 'click .delete': function (e, value, row, index) { alert('刪除'); } } function operateFormatter(value, row, index) { console.log(row) return [ '<a class="show me-2" href="javascript:void(0)" title="查詢" target="_self">', '<i class="bi bi-search"></i>', '</a>', '<a class="edit me-2" href="javascript:void(0)" title="編輯" target="_self">', '<i class="bi bi-pencil-square"></i>', '</a>', '<a class="delete me-2 text-danger" href="javascript:void(0)" title="刪除" target="_self">', '<i class="bi bi-file-earmark-x"></i>', '</a>' ].join('') } - 調用
$(function(){ // 參數設定：https://examples.bootstrap-table.com/#options/table-ajax.html $("#table").bootstrapTable({ classes: 'table table-sm table-striped table-bordered table-hover', //表格樣式 table table-sm table-striped table-bordered table-hover toolbar: '#toolbar', //工具按鈕用哪個容器 cache: false, //是否使用快取，預設為 true，所以一般情況下需要設定一下這個屬性（*） uniqueId:'', //哪一個欄位是key sortName:'', //依照那個欄位排序 // height : 450, //高度 sortable: false, //是否啟用排序 sortOrder:'', //asc sidePagination: "client", //分頁方式：client 使用者端分頁，server 伺服器端分頁（*） theadClasses: 'table-light', //標題列樣式 //可於ToolBar上顯示的按鈕 buttonsClass: "primary", // buttonsAlign: "left", //left right showColumns : true, //顯示/隱藏哪些欄位 showToggle : true, //名片式/table式切換 showRefresh : false, //重新整理 showPaginationSwitch : true, //分頁/不分頁切換 showFullscreen: true, //顯示全螢幕 search : true, //查詢 buttons : '', //返回主檔按鈕 // cardView: true, //是否顯示詳細檢視 // detailView: true, //是否顯示父子表 showExport: true, //是否顯示匯出 exportDataType: 'basic', //匯出資料型別，支援：'基本'，'全部'，'選中' exportTypes:['json', 'csv', 'excel', 'xlsx', 'png'], //匯出型別 pagination : true, //使否要分頁 pageNumber:1, //初始化載入第一頁，預設第一頁 onPageChange:function(currentPage, pageSize) { //console.log("目前頁數: "+currentPage+" ,一頁顯示: "+pageSize+" 筆"); }, pageSize : 20, //一頁顯示幾筆 pageList : "[ 20, 50, 100, all]", //一頁顯示幾筆的選項 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; } }); }) - custom.html
<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> <!--bootstrap-table-export--> <script src="https://unpkg.com/bootstrap-table@1.22.1/dist/extensions/export/bootstrap-table-export.min.js"></script> <!--在客户端保存生成的导出文件--> <script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/plugins/export/libs/FileSaver.js/FileSaver.min.js"></script> <!--以XLSX（Excel 2007+ XML格式）格式导出表（SheetJS）--> <script src=" https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.6/xlsx.core.min.js"></script> <!--以PNG格式导出表格--> <!--对于IE支持包括 html2canvas 之前的 es6-promise--> <script src="https://cdn.bootcss.com/es6-promise/4.1.1/es6-promise.auto.min.js"></script> <script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script> <!--无论期望的格式如何，最后都包含 tableexport.jquery.plugin（不是tableexport）--> <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script> <!-- 流水號 客戶名稱 客戶電話 客戶地址 備註 --> <div id="toolbar"></div> <table id="table"> <thead> <tr> <? for(let i in stru){ ?> <th data-field='<?= stru[i]['title']?>' data-sortable='true' data-align='left' data-width='' data-visible='true' > <?= stru[i]['title']?> </th> <? } ?> <th data-field='operate' data-sortable='false' data-align='center' data-width='150' data-clickToSelect='false' data-events='window.operateEvents' data-formatter='operateFormatter'> <a href="<?= global['url'] ?>?op=form_custom" class="" title='新增'> <i class="bi bi-file-earmark-plus"></i> </a> </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> <? } ?> <td></td> </tr> <? } ?> </tbody> </table> <script> window.operateEvents = { 'click .show': function (e, value, row, index) {//顯示單筆 alert('查詢');// }, 'click .edit': function (e, value, row, index) { top.location.href='<?= global.url ?>?op=form_custom&&sn='+row[0] }, 'click .delete': function (e, value, row, index) { alert('刪除'); } } function operateFormatter(value, row, index) { console.log(row) return [ '<a class="show me-2" href="javascript:void(0)" title="查詢" target="_self">', '<i class="bi bi-search"></i>', '</a>', '<a class="edit me-2" href="javascript:void(0)" title="編輯" target="_self">', '<i class="bi bi-pencil-square"></i>', '</a>', '<a class="delete me-2 text-danger" href="javascript:void(0)" title="刪除" target="_self">', '<i class="bi bi-file-earmark-x"></i>', '</a>' ].join('') } $(function(){ // 參數設定：https://examples.bootstrap-table.com/#options/table-ajax.html $("#table").bootstrapTable({ classes: 'table table-sm table-striped table-bordered table-hover', //表格樣式 table table-sm table-striped table-bordered table-hover toolbar: '#toolbar', //工具按鈕用哪個容器 cache: false, //是否使用快取，預設為 true，所以一般情況下需要設定一下這個屬性（*） uniqueId:'', //哪一個欄位是key sortName:'', //依照那個欄位排序 // height : 450, //高度 sortable: false, //是否啟用排序 sortOrder:'', //asc sidePagination: "client", //分頁方式：client 使用者端分頁，server 伺服器端分頁（*） theadClasses: 'table-light', //標題列樣式 //可於ToolBar上顯示的按鈕 buttonsClass: "primary", // buttonsAlign: "left", //left right showColumns : true, //顯示/隱藏哪些欄位 showToggle : true, //名片式/table式切換 showRefresh : false, //重新整理 showPaginationSwitch : true, //分頁/不分頁切換 showFullscreen: true, //顯示全螢幕 search : true, //查詢 buttons : '', //返回主檔按鈕 // cardView: true, //是否顯示詳細檢視 // detailView: true, //是否顯示父子表 showExport: true, //是否顯示匯出 exportDataType: 'basic', //匯出資料型別，支援：'基本'，'全部'，'選中' exportTypes:['json', 'csv', 'excel', 'xlsx', 'png'], //匯出型別 pagination : true, //使否要分頁 pageNumber:1, //初始化載入第一頁，預設第一頁 onPageChange:function(currentPage, pageSize) { //console.log("目前頁數: "+currentPage+" ,一頁顯示: "+pageSize+" 筆"); }, pageSize : 20, //一頁顯示幾筆 pageList : "[ 20, 50, 100, all]", //一頁顯示幾筆的選項 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>