bootstraptable.html 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css" >
  5. <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
  6. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
  7. <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
  8. <script src="https://code.jquery.com/jquery-3.4.1.js" ></script>
  9. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
  10. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.js"></script>
  11. <script src="https://unpkg.com/[email protected]/dist/bootstrap-table.js"></script>
  12. <script src="demobootstraptable.js"></script>
  13. </head>
  14. <body>
  15. <div class="container-fluid">
  16. <ul class="nav nav-tabs">
  17. <li><a id="nav-tab-prefilled" class="nav-link active" data-toggle="tab" href="#tab-prefilled">Existing</a></li>
  18. <li><a id="nav-tab-data" class="nav-link" data-toggle="tab" href="#tab-data">Using Data</a></li>
  19. <li><a id="nav-tab-manual" class="nav-link " data-toggle="tab" href="#tab-manual">Manual</a></li>
  20. </ul>
  21. <div class="tab-content">
  22. <div id="tab-prefilled" class="tab-pane fade show active" >
  23. <div id="prefilled-toolbar" class="row">
  24. <div class="col-sm-4"><h3>Pre-defined existing HTML table</h3></div>
  25. </div>
  26. <div class="row">
  27. <table id="table-prefilled">
  28. <thead>
  29. <tr>
  30. <th>Name</th>
  31. <th>Stars</th>
  32. <th>Forks</th>
  33. <th>Description</th>
  34. </tr>
  35. </thead>
  36. <tbody>
  37. <tr id="tr-id-1" class="tr-class-1" data-title="bootstrap table" data-object='{"key": "value"}'>
  38. <td id="td-id-1" class="td-class-1" data-title="bootstrap table">
  39. <a href="https://github.com/wenzhixin/bootstrap-table" target="_blank">bootstrap-table</a>
  40. </td>
  41. <td data-value="526">8827</td>
  42. <td data-text="122">3603</td>
  43. <td data-i18n="Description">An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
  44. </td>
  45. </tr>
  46. <tr id="tr-id-2" class="tr-class-2">
  47. <td id="td-id-2" class="td-class-2">
  48. <a href="https://github.com/wenzhixin/multiple-select" target="_blank">multiple-select</a>
  49. </td>
  50. <td>1615</td>
  51. <td>623</td>
  52. <td>A jQuery plugin to select multiple elements with checkboxes :)
  53. </td>
  54. </tr>
  55. <tr id="tr-id-3" class="tr-class-3">
  56. <td id="td-id-3" class="td-class-3">
  57. <a href="https://github.com/wenzhixin/bootstrap-show-password" target="_blank">bootstrap-show-password</a>
  58. </td>
  59. <td>220</td>
  60. <td>85</td>
  61. <td>Show/hide password plugin for twitter bootstrap.
  62. </td>
  63. </tr>
  64. <tr id="tr-id-4" class="tr-class-4">
  65. <td id="td-id-4" class="td-class-4">
  66. <a href="https://github.com/wenzhixin/bootstrap-table-examples" target="_blank">bootstrap-table-examples</a>
  67. </td>
  68. <td>1734</td>
  69. <td>1532</td>
  70. <td>Bootstrap Table Examples</td>
  71. </tr>
  72. <tr id="tr-id-5" class="tr-class-5">
  73. <td id="td-id-5" class="td-class-5">
  74. <a href="https://github.com/wenzhixin/scutech-redmine" target="_blank">scutech-redmine</a>
  75. </td>
  76. <td>24</td>
  77. <td>18</td>
  78. <td>Redmine notification tools for chrome extension.</td>
  79. </tr>
  80. </tbody>
  81. </table>
  82. </div>
  83. </div>
  84. <div id="tab-data" class="tab-pane fade " >
  85. <div id="prefilled-toolbar" class="row">
  86. <div class="col-sm-4"><h3>Using data link</h3></div>
  87. </div>
  88. <div class="row">
  89. <table id="table-data">
  90. <thead>
  91. <tr>
  92. <th data-field="Name" >Name</th>
  93. <th data-field="Population">Population</th>
  94. </tr>
  95. </thead>
  96. </table>
  97. </div>
  98. </div>
  99. <div id="tab-manual" class="tab-pane fade " >
  100. <div id="manual-toolbar" class="row">
  101. <div class="col-sm-4"><h3>Manually created</h3></div>
  102. </div>
  103. <div class="row">
  104. <table id="table-manual"></table>
  105. </div>
  106. </div>
  107. </div>
  108. <div class="source row">
  109. <div>
  110. Created using &nbsp; <a target="_blank" href="https://wiki.freepascal.org/pas2js">pas2js.</a> &nbsp;&nbsp;Sources: &nbsp;
  111. <a target="new" href="demobootstraptable.lpr">Program</a>.
  112. </div>
  113. </div>
  114. <script>
  115. window.onload=function () { rtl.run() };
  116. </script>
  117. </body>
  118. </html>