UNPKG

2.1 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <title>{NAME} v{VERSION} - Pagination Demo</title>
5 <!-- @import partials/style.html -->
6 <style type="text/css">
7 /**
8 * Custom styles
9 */
10 .myLoader{
11 position:absolute; padding: 5px;
12 margin:100px 0 0 5%; width:auto;
13 z-index:1000; font-size:12px; font-weight:bold;
14 border:1px solid #666; background:#ffffcc;
15 vertical-align:middle;
16 }
17 .myStatus{
18 width:auto; display:block;
19 }
20 </style>
21</head>
22<body>
23<h1>{NAME} v{VERSION}</h1>
24<h2>Pagination demo</h2>
25
26<!-- @import partials/pre.html -->
27<!-- @import partials/countries-table.html -->
28
29<!-- @import partials/tablefilter-script.html -->
30<script data-config>
31 var filtersConfig = {
32 base_path: '../dist/tablefilter/',
33 paging: {
34 results_per_page: ['Records: ', [10, 25, 50, 100]]
35 },
36 state: {
37 types: ['local_storage'],
38 filters: true,
39 page_number: true,
40 page_length: true,
41 sort: true
42 },
43 responsive: true,
44 help_instructions: {
45 container_adjust_left_position: 30
46 },
47 alternate_rows: true,
48 btn_reset: true,
49 rows_counter: true,
50 loader: {
51 html: '<div id="lblMsg"></div>',
52 css_class: 'myLoader'
53 },
54 status_bar: {
55 target_id: 'lblMsg',
56 css_class: 'myStatus'
57 },
58 no_results_message: true,
59 col_0: 'select',
60 col_1: 'select',
61 col_2: 'select',
62 extensions:[{
63 name: 'sort',
64 types: [
65 'string', 'string', 'number',
66 'number', 'number', 'number',
67 'number', 'number', 'number'
68 ]
69 }]
70 };
71
72 var tf = new TableFilter('demo', filtersConfig);
73 tf.init();
74
75</script>
76<!-- @import partials/pre-inline-script.html -->
77</body>
78</html>