Issue297.html 3.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <!DOCTYPE html>
  2. <!--suppress JSNonStrictModeUsed -->
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>Issue297</title>
  7. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  8. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
  9. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
  10. <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.16.0/extensions/export/bootstrap-table-export.js"></script>
  11. <script type="text/javascript" src="../tableExport.js"></script>
  12. <script src="//unpkg.com/tableexport.jquery.plugin/libs/jsPDF/jspdf.min.js"></script>
  13. <script type="text/javascript" src="../libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
  14. <script src="//cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.6/xlsx.core.min.js"></script>
  15. <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
  16. <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.css" />
  17. <script>
  18. $(document).ready(function()
  19. {
  20. var $table = $('#table-results');
  21. $table.bootstrapTable('destroy').bootstrapTable({
  22. exportDataType: 'all',
  23. exportTypes: ['json', 'xml', 'csv', 'txt', 'sql', 'excel', 'xlsx', 'pdf'],
  24. exportOptions: {
  25. fileName: 'user information report', //file name setting
  26. excelstyles: ['background-color', 'color', 'font-size', 'font-weight'],
  27. jspdf: {
  28. format: 'bestfit',
  29. autotable: {
  30. theme: 'grid',
  31. bodyStyles: {
  32. lineColor: 128
  33. },
  34. styles: {
  35. overflow: 'linebreak',
  36. fontSize: 8
  37. },
  38. alternateRowStyles: {
  39. fillColor: [255, 255, 255]
  40. }
  41. }
  42. }
  43. }
  44. });
  45. });
  46. </script>
  47. </head>
  48. <body>
  49. <div class="container">
  50. <table id="table-results" class="table"
  51. data-show-export="true"
  52. data-pagination="true"
  53. data-side-pagination="client"
  54. data-click-to-select="true"
  55. data-show-toggle="true"
  56. data-show-columns="true"
  57. data-page-size="50"
  58. data-page-list="[50, 100, 300, 500, all]"
  59. data-export-data-type="all">
  60. <thead>
  61. <tr>
  62. <th>First name</th>
  63. <th>Last name</th>
  64. <th>Group</th>
  65. </tr>
  66. </thead>
  67. <tbody>
  68. <tr>
  69. <td>Jane</td>
  70. <td>Doe</td>
  71. <td data-tableexport-value="Group 1, Group 2, Group 3">Group 1 <a href="#" data-toggle="tooltip" title="Group 2, Group 3">+2</a></td>
  72. </tr>
  73. <tr>
  74. <td>Jane</td>
  75. <td>Doe</td>
  76. <td>Group 1 <a href="#" data-toggle="tooltip" title="Group 2, Group 3">+2</a></td>
  77. </tr>
  78. </tbody>
  79. </table>
  80. </div>
  81. </body>
  82. </html>