qianda
/
hebei-chengben-car


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
							<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>HTML table Export</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

  <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/export/bootstrap-table-export.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/toolbar/bootstrap-table-toolbar.js"></script>

  <script type="text/javascript" src="../libs/FileSaver/FileSaver.min.js"></script>
  <script type="text/javascript" src="../libs/js-xlsx/xlsx.core.min.js"></script>

  <script type="text/javascript" src="../libs/jsPDF/jspdf.umd.min.js"></script>

  <script type="text/javascript" src="../tableExport.js"></script>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">

  <script type="text/javaScript">


  function detailFormatter(index, row) {
      var html = [];
      $.each(row, function (key, value) {
          html.push('<p><b>' + key + ':</b> ' + value + '</p>');
      });
      return html.join('');
  }

  </script>
  </head>
  <body>
    <a href="#" onclick="$('#table1,#table2').tableExport({type:'excel',
                                                           mso: {
                                                             fileFormat:'xmlss',
                                                             worksheetName: ['Table 1','Table 2']
                                                           },
                                                           ignoreColumn: [0, 'checkbox']
                                                           });">
      <br>&nbsp;<b>Click to export to Excel ('xmlss' = XML Spreadsheet 2003 file format)</b>
    </a>
    <a href="#" onclick="$('#table1').tableExport({type:'excel',
                                                           mso: {
                                                             fileFormat:'xlsx'
                                                           },
                                                           ignoreColumn: [0, 'checkbox']
                                                           });">
      <br>&nbsp;<b>Click to export to Excel ('xlsx' = Excel 2007 Office Open XML format)</b>
    </a>
    <a href="#" onclick="$('#table1').tableExport({type: 'pdf',
                                                          jspdf: {orientation: 'l',
                                                                  margins: {right: 10, left: 10, top: 40, bottom: 40},
                                                                  autotable: {tableWidth: 'auto'}}});">
      <br>&nbsp;<b>Click to export to PDF (jsPDF / jsPDF-AutoTable)</b>
    </a>
    <div class="container">
      <h1 align="center">Data</h1><br>
      <table id="table1"
        data-toggle="table"
        data-height="600"
        data-show-toggle="true"
        data-show-columns="true"
        data-click-to-select="true"
        data-detail-view="true"
        data-detail-formatter="detailFormatter"
        data-url="tableExport.json">
        <thead>
          <tr>
            <th data-field="checkbox"    data-checkbox="true"                                                      >           </th>
            <th data-field="Rank"        data-sortable="true"  data-filter-control="select"  data-visible="true"   >Rank       </th>
            <th data-field="Flag"        data-sortable="true"  data-filter-control="input"   data-visible="false"  >Flag       </th>
            <th data-field="Country"     data-sortable="true"  data-filter-control="select"  data-visible="true"   >Country    </th>
            <th data-field="Population"  data-sortable="true"  data-filter-control="select"  data-visible="false"  >Population </th>
            <th data-field="Date"        data-sortable="true"  data-filter-control="select"  data-visible="true"   >Date       </th>
            <th data-field="p_of_world"  data-sortable="true"  data-filter-control="select"  data-visible="false"  >% of world </th>
            <th data-field="Language"    data-sortable="true"  data-filter-control="select"  data-visible="true"   >Language   </th>
          </tr>
        </thead>
      </table>
      <br><br>
      <table id="table2"
             data-toggle="table"
             data-pagination="false"
             data-detail-view="true"
             data-url="bootstrap3.json">
        <thead>
        <tr>
          <th data-field="col1" data-sortable="true">Col 1</th>
          <th data-field="col2" data-sortable="true">Col 2</th>
        </tr>
        </thead>
      </table>
    </div>
  </body>
</html>