tablefilter
Version:
A Javascript library making HTML tables filterable and a bit more
79 lines (74 loc) • 2.1 kB
HTML
<html lang="en">
<head>
<title>{NAME} v{VERSION} - Pagination Demo</title>
<!-- @import partials/style.html -->
<style type="text/css">
/**
* Custom styles
*/
.myLoader{
position:absolute; padding: 5px;
margin:100px 0 0 5%; width:auto;
z-index:1000; font-size:12px; font-weight:bold;
border:1px solid #666; background:#ffffcc;
vertical-align:middle;
}
.myStatus{
width:auto; display:block;
}
</style>
</head>
<body>
<h1>{NAME} v{VERSION}</h1>
<h2>Pagination demo</h2>
<!-- @import partials/pre.html -->
<!-- @import partials/countries-table.html -->
<!-- @import partials/tablefilter-script.html -->
<script data-config>
var filtersConfig = {
base_path: '../dist/tablefilter/',
paging: {
results_per_page: ['Records: ', [10, 25, 50, 100]]
},
state: {
types: ['local_storage'],
filters: true,
page_number: true,
page_length: true,
sort: true
},
responsive: true,
help_instructions: {
container_adjust_left_position: 30
},
alternate_rows: true,
btn_reset: true,
rows_counter: true,
loader: {
html: '<div id="lblMsg"></div>',
css_class: 'myLoader'
},
status_bar: {
target_id: 'lblMsg',
css_class: 'myStatus'
},
no_results_message: true,
col_0: 'select',
col_1: 'select',
col_2: 'select',
extensions:[{
name: 'sort',
types: [
'string', 'string', 'number',
'number', 'number', 'number',
'number', 'number', 'number'
]
}]
};
var tf = new TableFilter('demo', filtersConfig);
tf.init();
</script>
<!-- @import partials/pre-inline-script.html -->
</body>
</html>