TableFilter icon indicating copy to clipboard operation
TableFilter copied to clipboard

paging length does not work

Open Hypnos3 opened this issue 4 years ago • 0 comments

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: image

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();
}

Hypnos3 avatar Sep 12 '19 08:09 Hypnos3