corrade-nucleus-nucleons – Blame information for rev 20
?pathlinks?
Rev | Author | Line No. | Line |
---|---|---|---|
20 | office | 1 | # Usage []({{ site.repo }}/blob/develop/docs/_i18n/{{ site.lang }}/getting-started/usage.md) |
2 | |||
3 | --- |
||
4 | |||
5 | Include Bootstrap library (if your project doesn't use it already) and `bootstrap-table.css` in the head tag your html document. |
||
6 | |||
7 | ```html |
||
8 | <link rel="stylesheet" href="bootstrap.min.css"> |
||
9 | <link rel="stylesheet" href="bootstrap-table.css"> |
||
10 | ``` |
||
11 | |||
12 | Include jQuery library, bootstrap library (if your project doesn't use it already) and `bootstrap-table.js` in the head tag or at the very bottom of your document, just before the closing body tag (usually recommended for better performance). |
||
13 | |||
14 | ```html |
||
15 | <script src="jquery.min.js"></script> |
||
16 | <script src="bootstrap.min.js"></script> |
||
17 | <script src="bootstrap-table.js"></script> |
||
18 | <-- put your locale files after bootstrap-table.js --> |
||
19 | <script src="bootstrap-table-zh-CN.js"></script> |
||
20 | ``` |
||
21 | |||
22 | --- |
||
23 | |||
24 | The Bootstrap Table plugin displays data in a tabular format, via data attributes or JavaScript. |
||
25 | |||
26 | ## Via data attributes |
||
27 | |||
28 | Activate bootstrap table without writing JavaScript. Set `data-toggle="table"` on a normal table. |
||
29 | |||
30 | ```html |
||
31 | <table data-toggle="table"> |
||
32 | <thead> |
||
33 | <tr> |
||
34 | <th>Item ID</th> |
||
35 | <th>Item Name</th> |
||
36 | <th>Item Price</th> |
||
37 | </tr> |
||
38 | </thead> |
||
39 | <tbody> |
||
40 | <tr> |
||
41 | <td>1</td> |
||
42 | <td>Item 1</td> |
||
43 | <td>$1</td> |
||
44 | </tr> |
||
45 | <tr> |
||
46 | <td>2</td> |
||
47 | <td>Item 2</td> |
||
48 | <td>$2</td> |
||
49 | </tr> |
||
50 | </tbody> |
||
51 | </table> |
||
52 | ``` |
||
53 | |||
54 | We can also use remote url data by setting `data-url="data1.json"` on a normal table. |
||
55 | |||
56 | ```html |
||
57 | <table data-toggle="table" data-url="data1.json"> |
||
58 | <thead> |
||
59 | <tr> |
||
60 | <th data-field="id">Item ID</th> |
||
61 | <th data-field="name">Item Name</th> |
||
62 | <th data-field="price">Item Price</th> |
||
63 | </tr> |
||
64 | </thead> |
||
65 | </table> |
||
66 | ``` |
||
67 | |||
68 | ## Via JavaScript |
||
69 | |||
70 | Call a bootstrap table with id table with JavaScript. |
||
71 | |||
72 | ```html |
||
73 | <table id="table"></table> |
||
74 | ``` |
||
75 | |||
76 | ```js |
||
77 | $('#table').bootstrapTable({ |
||
78 | columns: [{ |
||
79 | field: 'id', |
||
80 | title: 'Item ID' |
||
81 | }, { |
||
82 | field: 'name', |
||
83 | title: 'Item Name' |
||
84 | }, { |
||
85 | field: 'price', |
||
86 | title: 'Item Price' |
||
87 | }], |
||
88 | data: [{ |
||
89 | id: 1, |
||
90 | name: 'Item 1', |
||
91 | price: '$1' |
||
92 | }, { |
||
93 | id: 2, |
||
94 | name: 'Item 2', |
||
95 | price: '$2' |
||
96 | }] |
||
97 | }); |
||
98 | ``` |
||
99 | |||
100 | We can also use remote url data by setting `url: 'data1.json'`. |
||
101 | |||
102 | ```js |
||
103 | $('#table').bootstrapTable({ |
||
104 | url: 'data1.json', |
||
105 | columns: [{ |
||
106 | field: 'id', |
||
107 | title: 'Item ID' |
||
108 | }, { |
||
109 | field: 'name', |
||
110 | title: 'Item Name' |
||
111 | }, { |
||
112 | field: 'price', |
||
113 | title: 'Item Price' |
||
114 | }, ] |
||
115 | }); |
||
116 | ``` |