Created
April 5, 2024 12:36
-
-
Save gabonator/972e823c2222ff13a738711700d45c88 to your computer and use it in GitHub Desktop.
bootstrap table
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <meta name="author" content="Gabriel Valky"> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css"> | |
| <link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.22.2/dist/bootstrap-table.min.css"> | |
| </head> | |
| <body> | |
| <table id="btable" data-toggle="table" | |
| data-detail-view="true" | |
| data-unique-id="id" | |
| data-detail-view-icon="false" | |
| data-detail-view-by-click="true" | |
| data-detail-formatter="app.formatters.detail"> | |
| <thead> | |
| <tr> | |
| <th data-field="icn" data-width="64"></th> | |
| <th data-field="id">id</th> | |
| <th data-field="state">state</th> | |
| <th data-field="ts" data-formatter="app.formatters.timestamp">date</th> | |
| </tr> | |
| </thead> | |
| </table> | |
| <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> | |
| <script src="https://unpkg.com/bootstrap-table@1.22.2/dist/bootstrap-table.min.js"></script> | |
| <script> | |
| "use strict"; | |
| class Formatters | |
| { | |
| detail(index, row) | |
| { | |
| return `Detail for ${row.id}` | |
| } | |
| timestamp(index, row) | |
| { | |
| return new Date(row.ts).toLocaleString(); | |
| } | |
| } | |
| class App | |
| { | |
| constructor() | |
| { | |
| this.formatters = new Formatters(); | |
| this.table = $('#btable'); | |
| this.data = [ | |
| {icn: "X", id:"my id 1", state: "hello", ts: new Date().getTime()}, | |
| {icn: "Y", id:"my id 2", state: "hello", ts: new Date().getTime()-1000*60*60*24}, | |
| {icn: "Z", id:"my id 3", state: "hello", ts: new Date().getTime()-1000*60*60*24*365}, | |
| ] | |
| window.addEventListener("DOMContentLoaded", () => { | |
| this.update() | |
| }); | |
| } | |
| update() | |
| { | |
| this.table.bootstrapTable('load', this.data); | |
| } | |
| } | |
| var app = new App(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment