bootstrap3.html 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>HTML table Export</title>
  6. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  7. <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
  8. <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script>
  9. <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/export/bootstrap-table-export.js"></script>
  10. <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/toolbar/bootstrap-table-toolbar.js"></script>
  11. <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/extensions/filter-control/bootstrap-table-filter-control.js"></script>
  12. <script type="text/javascript" src="../tableExport.js"></script>
  13. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  14. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
  15. <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css">
  16. <script type="text/javaScript">
  17. $(document).ready(function()
  18. {
  19. var $table = $('#table');
  20. $table.bootstrapTable('refreshOptions', {
  21. exportOptions: {},
  22. onExpandRow: function(index, row, $detail) {
  23. $detail.html('<table></table>').find('table').bootstrapTable({
  24. columns: [{
  25. field: 'col3',
  26. title: 'Col3'
  27. }, {
  28. field: 'col4',
  29. title: 'Col4'
  30. }, {
  31. field: 'col5',
  32. title: 'Col5'
  33. }],
  34. data: row.nested,
  35. detailView: row.nested[0]['other'] !== undefined,
  36. onExpandRow: function(indexb, rowb, $detailb) {
  37. $detailb.html('<table></table>').find('table').bootstrapTable({
  38. columns: [{
  39. field: 'col6',
  40. title: 'Col6'
  41. }, {
  42. field: 'col7',
  43. title: 'Col7'
  44. }],
  45. data: rowb.other
  46. });
  47. }
  48. });
  49. }
  50. });
  51. });
  52. </script>
  53. </head>
  54. <body>
  55. <table id="table"
  56. data-toggle="table"
  57. data-show-export="true"
  58. data-pagination="false"
  59. data-search="true"
  60. data-detail-view="true"
  61. data-url="bootstrap3.json">
  62. <thead>
  63. <tr>
  64. <th data-field="col1" data-sortable="true">Col 1</th>
  65. <th data-field="col2" data-sortable="true">Col 2</th>
  66. </tr>
  67. </thead>
  68. </table>
  69. </body>
  70. </html>