Filters not working properly with dynamically created table

[Yahosh]

I run a stored procedure to get the data for an HTML table after document.ready(). I then dynamically recreate the table rows with the Stored Procedure data. When I do this, the toolbar options and pop up filters either do not work or do not show the right row count, page numbers etc..

I've tried using the:

tf.destroy(); tf.init();

and that makes everything work properly, except for the pop up filters. The first column is a select filter, which displays properly, but every filter after that only shows the very top point of what would be the pop up itself.

Please let me know what I missed.

[koalyptus]

Hi @Whiteshua, Do you have any javascript errors appearing in the browser's console? Which TableFilter's version are you using?

For future issues please use this template

Cheers

[Yahosh]

There aren't any JavaScript errors in the browser and I'm using commit 495b64e from February 18, 2019.

I use the following code to set the table up, at the end of the page:

var filtersConfig = { base_path: '../lib/tablefilter/', col_0: 'checklist', col_1: 'checklist', col_2: 'checklist', col_3: 'none', col_4: 'checklist', col_5: 'checklist', col_7: 'checklist', col_12: 'checklist', col_13: 'checklist', col_14: 'checklist', col_18: 'checklist', linked_filters: true, mark_active_columns: true, paging: true, paging: { results_per_page: ['Results per page ', [50, 100, 250, 500]] }, popup_filters: true, rows_counter: true, responsive: true, status_bar: true, auto_filter: true, btn_reset: true, toolbar: { target_id: 'externalToolbar' }, msg_filter: 'Filtering...', highlight_keywords: true, extensions: [{ name: 'sort' }] }; var tf = new TableFilter('staffingList', filtersConfig);

In my $(document).ready function at the top of the page, I run an Ajax call to get the data for the table. Once the table has been updated, I then call tf.destroy(); tf.init();.

Hopefully that's clearer.

Also, I will make sure to use that template in the future.

Thank you for your time.

[Yahosh]

I found a fix for my problem. Instead of using only:

tf.destroy(); tf.init();

I had to use:

tf.destroy(); tf = new TableFilter('staffingList', filtersConfig); tf.init();

Was this documented somewhere that I missed?

[cjohnsonuk]

if you run .destroy() on the tf object then you will have to create a new one with tf = new TableFilter('staffingList', filtersConfig); before you can .init() it Otherwise tf doesn't exist for any methods to be run.

[Yahosh]

Thank you for your help with this and for making such a wonderful tool.

[koalyptus]

@cjohnsonuk tx for replying and sharing your experience in using TableFilter in a production environment. I can't find another channel to contact you within GitHub, I am wondering if you are keen to collaborate in this project. Let me know what you think. Cheers

[juamar]

Hello. I 'm having a issue with this library, i think this is the best channel to expose my problem. You see, for tables with dynamic data this is kind of working, but the problem i'm facing now is that, every time i reload data, which is like every five seconds or so, i lose the filter i have selected in the table.

I will take a look to this library's documentation to see if i can solve this out using tf.destroy() and tf.init() by saving user's choice somwhere and the reload it, but i was looking for a smarter and cleaner way to do this. I was looking something like, reloading the data that is within the table without having to destroy all the tf object, something more dynamic. Some kind of refersh() or reloadData(), i don't know, maybe it already exists, but i'm not being able to find it. I think nowadays with all the frameworks like angular, react, etc, this is very important in order to work with dynamic data correctly.

[juamar]

Every time i update my data, i'm executing this lines of code right now:

        var filters = tf.getFiltersValue();

        var table = elem.find('#tabla')[0];
        tf.destroy();
        tf = new TableFilter(table,3,filtersConfig);
        tf.init();

        if (filters.length > 0)
        {
            for (let index = 0; index < filters.length; index++) {
                const filter = filters[index];
                tf.setFilterValue(index, filter);
            }
        }

        tf.filter();

The problem is that the filter function is not filtering the selection i'm recovering from tf previous instance.

Thanks in advance