[2022.LEARN.008][筆記]BootstrapTable簡易用法

<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/