TableFilter
TableFilter copied to clipboard
paging length does not work
Describe the bug Setting the paging length property does not take effect.
Reproduction steps: Steps to reproduce the behavior: Setup:
const tfConfig = {
base_path: 'scripte/tablefilter/',
// paging: true,
paging: {
results_per_page: ['Records: ', [25, 50, 100, 500, 1000]],
length: 1000
},
filters_row_index: 1,
linked_filters: true,
disable_excluded_options: true,
state: {
types: ['local_storage'], // local_storage / cookie
filters: false,
page_number: false,
page_length: false,
sort: false,
columns_visibility: false,
filters_visibility: false
},
auto_filter: {
delay: 800 // milliseconds
},
msg_filter: 'Filtering...',
alternate_rows: true,
btn_reset: true,
rows_counter: true,
help_instructions: false,
fixed_headers: true,
loader: true,
status_bar: true,
mark_active_columns: true,
highlight_keywords: true,
no_results_message: false,
watermark: ['Locked', // 0-Locked
'ID', // 1-ID
'none', // 2-Tempalte
'ToolID', // 3-ToolID
'none', // 4-Type
'none', // 5-State
'>1900-10-01', // 6-needed
'>1900-10-01', // 7-updated
'none', // 8-Requestor
'>1900-10-01', // 9-created
'none', 'none', 'none', 'none', 'none', 'none', 'none', 'none' // 10-17 Workgroups
],
col_types: ['string', // 0-Locked
'string', // 1-ID
'string', // 2-Tempalte
'string', // 3-Type
'string', // 4-ToolID
'string', // 5-State
{ type: 'date', locale: 'en' }, // 'date', // 6-needed
{ type: 'date', locale: 'en' }, // 'date', // 7-updated
'string', // 8-Requestor
{ type: 'date', locale: 'en' }, // 'date', // 9-created
'number', 'number', 'number', 'number', 'number', 'number', 'number', 'number'
],
// set Filter types none, checklist, select
col_0: 'none',
// col_1: 'select',
col_2: 'select',
// col_3: 'select',
col_4: 'select', // 'checklist',
col_5: 'select',
// col_6: 'none',
// col_7: 'none',
col_8: 'select',
// col_9: 'none',
col_10: 'select', col_11: 'select', col_12: 'select', col_13: 'select', col_14: 'select', col_15: 'select', col_16: 'select', col_17: 'select',
custom_options: {
cols: [10, 11, 12, 13, 14, 15, 16, 17],
texts: [
['0%-99%', '100%', 'na'],
['0%-99%', '100%', 'na'],
['0%-99%', '100%', 'na'],
['0%-99%', '100%', 'na'],
['0%-99%', '100%', 'na'],
['0%-99%', '100%', 'na'],
['0%-99%', '100%', 'na'],
['0%-99%', '100%', 'na']
],
values: [
['=0% || <100%', '=100%', 'na'],
['=0% || <100%', '=100%', 'na'],
['=0% || <100%', '=100%', 'na'],
['=0% || <100%', '=100%', 'na'],
['=0% || <100%', '=100%', 'na'],
['=0% || <100%', '=100%', 'na'],
['=0% || <100%', '=100%', 'na'],
['=0% || <100%', '=100%', 'na']
],
sorts: [false]
},
col_widths: [
'2%', '5.5%', '5.5%', '5.5%', '5.5%', '5.5%', '5.5%', '5.5%', '5.5%', '5.5%',
'5.5%', '5.5%', '5.5%', '5.5%', '5.5%', '5.5%', '5.5%', '5.5%'
],
extensions: [ {
name: 'sort',
async_sort: true,
on_after_sort: (o, colIndex) => {
const $header = $(o.getHeaderElement(colIndex)).find('img');
userTableSort = {
index : colIndex,
desc : !($header.hasClass('ascending'))
};
}
}, {
name: 'colsVisibility',
enable_icon: true,
tick_to_hide: false,
enable_hover: true,
at_start: [],
text: 'Visible Columns: ',
headers_text: [
'locked state',
'Request ID',
'Template',
'Equipment / Tool',
'Request Typ',
'Request State',
'Date needed',
'Date last change',
'Requestor',
'Date created'
]
// enable_tick_all: true
}],
/** Bootstrap integration */
// aligns filter at cell bottom when Bootstrap is enabled
filters_cell_tag: 'th',
// allows Bootstrap table styling
themes: [{
name: 'transparent' // 'skyblue'
}],
responsive: true
};
oTableFilter = new TableFilter('tabOverview',tfConfig);
oTableFilter.init();
The Drop Down is set to 25 and not to 1000 as expected:
Expected behavior
On Load the selected page length of the paging drop down should be the number set to paging.length
property of the configuration.
Observed behavior: The selected element is always the first element of the drop down box.
TableFilter version: 0.6.98 (maybe already exists in previous versions) Browser and version: Google Chrome 76.0.3809.132 OS and version: Microsoft Windows 10 Device: PC
- Problem can be reliably reproduced, doesn't happen randomly: Yes
My workaround is currently:
const paging = oTableFilter.feature('paging');
if (paging) {
$('.rspg').val(1000);
paging.onChangeResultsPerPage();
}