Long table process times

[cjohnsonuk]

We have set up a pair of emitters to display a spinner whilst table filter is doing its work.

    tf.emitter.on(["before-filtering"], function(tf){ 
       $(document).find(".loader").css("display","block");
         console.log( $(document).find(".loader"));
     });

    tf.emitter.on(["after-filtering"], function(tf){
        if(showStats == "on"){
          fillStats(tf); 
        } 
           $(document).find(".loader").css("display","none");
        console.log( $(document).find(".loader"));
    });`

However what we're finding is that when changing the entries in the filters for tables with 4000+ rows there is a long pause after the filter value has changed then the "before filter emitter" that displays the spinner (and the console logs as well) fires and then immediately the "after filter emitter" fires hiding the spinner again. It does appear to work ok on smaller tables...

Is there a process that runs before filtering that we should be using as the "on_before_xxx" action to display the spinner?

We're using TF 0.6.39 with this config

function createTableFilter(gridLayout) {
    return new TableFilter(document.getElementById("Data_Table"), {
        auto_filter: {
            delay: 1000
        },
        alternate_rows: true,
        base_path: '/plugins/tablefilter/0.6.39/',
        btn_reset: true,
        btn_responsive: true,
        default_date_type: 'YMD',
        enable_empty_option: true,
        enable_non_empty_option: true,
        extensions: [{
                name: 'colsVisibility',
                text: 'Untick to hide:',
                enable_tick_all: true,
                tick_to_hide: false
            }, {
                name: 'sort'
            }
        ],
        filters_cell_tag: 'th',
        filters_row_index: 1,
        grid_layout: gridLayout ? {
            width: '100%',
            height: '400px'
        }
         : false,
        highlight_keywords: true,
        ignore_diacritics: true,
        linked_filters: false,
        loader: true,
        loader_text: 'Filtering table...',
        mark_active_columns: {
            highlight_column: true
        },
        no_results_message: {
            content: 'There are no records matching the search criteria you have selected.'
        },
        responsive: true,
        rows_counter: true,
        paging: {
            results_per_page: ['Results', [10, 20, 50, 100, 200, 400]]
        },
        status_bar: true,
        state: {
            types: ['local_storage'],
            filters: true,
            page_number: true,
            page_length: true,
            sort: true,
            columns_visibility: true,
            filters_visibility: true
        },
        themes: [{
                name: 'wfc'
            }
        ],
        toolbar: {
            target_id: 'tf-toolbar'
        },
        col_0: 'input',
        col_1: 'input',
        col_2: 'input',
        col_3: 'multiple',
        col_4: 'multiple',
        col_5: 'input',
        col_6: 'input',
        col_7: 'input',
        col_8: 'multiple',
        col_9: 'multiple',
        col_10: 'multiple',
        col_11: 'multiple',
        col_12: 'multiple',
        col_13: 'multiple',
        col_14: 'multiple',
        col_15: 'multiple',
        col_16: 'multiple',
        col_17: 'multiple',
        col_18: 'multiple',
        col_19: 'multiple',
        col_widths: ["150px", "150px", "150px", "70px", "70px", "150px", "150px", "150px", "70px", "300px", "150px", "70px", "70px", "150px", "150px", "150px", "150px", "150px", "150px", "150px"],
        col_types: ["string", "string", "string", "string", "number", "string", "string", "string", "string", "string", "string", "number", "number", "string", "string", "string", "string", "string", "string", "string"],
        watermark: [],
        on_filters_loaded: function (tf) {
            var dom = tf.gridLayout ? tf.feature("gridLayout").headTbl : tf.dom();
            if (tf.gridLayout) {
                $(dom).css("width", "calc(100% - 0px)");
            }
        }
    });
}

[koalyptus]

Hi @cjohnsonuk , does your fillStats function get invoked? Have you tried to invert the calls?

    tf.emitter.on(["after-filtering"], function(tf){
        $(document).find(".loader").css("display","none");
        console.log( $(document).find(".loader"));
        if(showStats == "on"){
          fillStats(tf); 
        } 
    });`

In your config, the loader setting should read:

  ...
  loader: {
    text: 'Filtering table...'
  },

v0.6.65 comes with a bug fix to the loader (unrelated to your issue), but you might give it a try with your large table.

Cheers