<div class="mainContent am-u-md-8 am-u-lg-10">
<div class="container">
<h3>社員訂餐</h3>
<table id="table1"
data-show-columns="false"
data-search="true"
data-show-toggle="true"
data-pagination="true"
data-url='@Url.Content("~/Get/myList")?Mode=02'
data-resizable="true">
<thead>
<tr>
<th data-field="ClubName" data-sortable="true">社團</th>
<th data-field="UserName" data-sortable="true">社員</th>
<th data-field="SidesCode" data-sortable="true">餐點代號</th>
<th data-field="SidesName" data-sortable="true">餐點名稱</th>
</tr>
</thead>
</table>
</div>
</div>
data-sortable="true">餐點小計</th>
<th data-field="UserTotalAmount" data-sortable="true">社員小計</th>
<th data-field="ClubTotalAmount" data-sortable="true">社團費用合計</th>
<th data-field="TotalAmount" data-sortable="true">費用總計</th>
</tr>
</thead>
</table>
</div>
</div>
<!--bootstrap-->
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!--fontawesome-->
<script src="https://cdn.bootcss.com/font-awesome/5.8.1/js/all.min.js"></script>
<!--bootstrap-table-->
<link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>
<!--bootstrap-table-lanuage-->
<script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table-locale-all.min.js"></script>
<!--bootstrap-table-export-->
<script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/extensions/export/bootstrap-table-export.min.js"></script>
<!--在客户端保存生成的导出文件-->
<script src="https://cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<!--以XLSX（Excel 2007+ XML格式）格式导出表（SheetJS）-->
<script src="https://cdn.bootcss.com/xlsx/0.14.2/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>
<!--将表导出为PDF文件-->
<script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF/jspdf.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
<!--无论期望的格式如何，最后都包含 tableexport.jquery.plugin（不是tableexport）-->
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script>
$(function() {
$('#table1').bootstrapTable({
striped: true, //是否顯示行間隔色(斑馬線)
pagination: true,
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數
showToggle:true, //是否顯示詳細視圖和列表視圖的切換按鈕
onLoadSuccess: function(){ //加載成功時執行
console.info("加載成功");
},
onLoadError: function(){ //加載失敗時執行
console.info("加載數據失敗");
},
pageList: [10, 25, 50, 100,1000,2000],//
showExport: true,
exportDataType: "all", //basic', 'all', 'selected'.
exportTypes:['xlsx'],//'excel',
exportOptions:{
//ignoreColumn: [0,0], //忽略某一列的索引
fileName: '社員訂餐', //文件名稱設置
worksheetName: 'Sheet1', //表格工作區名稱
tableName: '社員訂餐',
excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
//onMsoNumberFormat: DoOnMsoNumberFormat
}
});
</script>
參考:
https://www.twblogs.net/a/5b7cfd412b71770a43dd6bdf
https://bootstrap-table.com/
