1 | <!DOCTYPE html>
|
2 | <html lang="en">
|
3 | <head>
|
4 | <title>{NAME} v{VERSION} - Columns Visibility Extension Demo</title>
|
5 |
|
6 | <link rel="stylesheet" type="text/css" href="../dist/tablefilter/style/colsVisibility.css">
|
7 | </head>
|
8 | <body>
|
9 | <h1>{NAME} v{VERSION}</h1>
|
10 | <h2>Columns visibility extension demo</h2>
|
11 | <p>
|
12 | This demo features the columns visibility extension.
|
13 | </p>
|
14 |
|
15 | <p>
|
16 | <button onclick="javascript:
|
17 | tf.extension('colsVisibility').hideCol(0);">Hide Column 0</button>
|
18 | <button onclick="javascript:
|
19 | tf.extension('colsVisibility').showCol(0);">Show Column 0</button>
|
20 | <button onclick="javascript:
|
21 | tf.extension('colsVisibility').toggleCol(2);">Toggle Column 2</button>
|
22 | </p>
|
23 |
|
24 |
|
25 |
|
26 |
|
27 | <script data-config>
|
28 | var tfConfig = {
|
29 | base_path: '../dist/tablefilter/',
|
30 | col_types: [
|
31 | 'number', 'string', 'string',
|
32 | 'formatted-number', 'formatted-number', 'string'
|
33 | ],
|
34 | paging: true,
|
35 | state: {
|
36 | types: ['cookie'],
|
37 | filters: true,
|
38 | columns_visibility: true
|
39 | },
|
40 | alternate_rows: true,
|
41 | rows_counter: true,
|
42 | btn_reset: {
|
43 | text: 'Clear'
|
44 | },
|
45 | status_bar: true,
|
46 | col_1: 'select',
|
47 | col_2: 'select',
|
48 |
|
49 |
|
50 | extensions:[
|
51 | {
|
52 | name: 'colsVisibility',
|
53 | at_start: [3, 5],
|
54 | text: 'Columns: ',
|
55 | enable_tick_all: true
|
56 | }, {
|
57 | name: 'sort'
|
58 | }
|
59 | ]
|
60 | };
|
61 |
|
62 | var tf = new TableFilter('demo', tfConfig);
|
63 | tf.init();
|
64 | </script>
|
65 |
|
66 | </body>
|
67 | </html>
|