select2 add new row

[performiture]

I am trying to add new row to the table with select2 filter. If you click "Add Row" the tbody will become blank until filter reset button is hit. Please see https://jsfiddle.net/igorsf/f69jte28/

[Mottie]

Hi @performiture!

It looks like it's an issue with the encoding of filters for storage. I'll have this problem fixed shortly.

[performiture]

Hi @Mottie,

Thanks for fixing this.. I think I found another issue related to this. When I set select2 filter on the last column all rows will be filtered. Here is demo https://jsfiddle.net/igorsf/fynwfryk/2/ If you try to select a city column 5 you will not get results but if you try column 1 it works fine.

[Mottie]

Actually it wasn't related; but a fix is now available for the select2 filter formatter in the master branch.

[Mottie]

Updated demo

[performiture]

Thanks for such a quick turnaround!

[Mottie]

Well, I try 😦... someday I'll work on an update for the select2 filter formatter so it supports version 4+.

[performiture]

Could you take a look at $('table').trigger("updateAll") event with of select2 filter formatter. In this example I am trying to change the filter_function on click but get an error widget-filter-formatter-select2.js:57 Uncaught TypeError: v.replace is not a function` Here is example https://jsfiddle.net/igorsf/pze42rhw/1/ If you click on "Change Filter" you will see this error.

[Mottie]

The issue there was that the select2 file was still targeting a DOM node that was removed. So now it adds a class name to the cell and targets that instead. There was also an issue, which was fixed, that popped up in the widget-filter.js file which only occurred after an "updateAll".

Anyway, I wouldn't recommend using "updateAll" because it is meant to update the table after content in the thead and tbody are modified - like adding or removing a column; and it still causes issues with some widgets.

The best method to update the filter widget would be to use the refreshWidgets method.

$('table').trigger("refreshWidgets", [true]);

Here is an updated demo which is using an updated widget-filter.js. I usually only update the jquery.tablesorter.widgets.js file with each release.

[performiture]

Thank you again! Both "updateAll" and "refreshWidgets" work now as described.

It would be really great if select2 selected option was retained after refresh just like other filters. Here is a demo https://jsfiddle.net/igorsf/awueejkh/8/ If you select to filter by "10-100" and city "Los Angeles" and hit "Run" to refresh, the city filter selected option is empty.

[Mottie]

That demo is missing the widget-storage.js file, and it wasn't using the most up-to-date versions of the widget-filter.js and widget-filter-formatter-select2.js (the jquery.tablesorter.widgets.js file has not yet been updated) - here is an updated demo.

Also, I had to make a few more tweaks to the select2 script, so please check the master branch.

[performiture]

Mottie, I've been trying to make this work with async ajax call to populate table rows. Here is my demo When refreshing, the select2 filter (city) will go blank or show "no matching rows found". Interestingly, if I add $('table').trigger("refreshWidgets", [true]); it starts working in this demo but in my project I loose all selected values for other filters after refresh.

[Mottie]

Hmm, I got the options to start working, but the selection isn't being saved. Give me a bit more time to work on this problem.

[Mottie]

Sorry, I haven't had a chance to work on this issue... too many distractions. I'll try to get to it soon.

[performiture]

Of course. Thank you for your fantastic work

[performiture]

Bump. Would be nice to make progress on this.

[Mottie]

Hiya! Sorry for the loooong delay...

Today I was working on finishing up the documentation on the new Mark widget. Once I get that done, this was the next thing on my to do list. I plan to have a new release available by this weekend.

[Mottie]

Ok, here is what I have figured out so far.

• When select2 does not find a match, it clears out the value. So that gets lost before the rows are added.

• To get around that I had to save the filters at initialization; then reapply the filters after the rows are added (ajax completes).

  $('.tablesorter')
    .on('filterInit', function() {
      savedFilters = $(this).data('lastSearch');
    })
    .tablesorter({ /* ... */ });
  
  // after rows are added
  $('table')
    .data('lastSearch', savedFilters)
    .trigger("update");

• When an "update" is triggered, it wasn't updating the filter formatter functions. It does now. We could have fixed the issue by triggering a "filterFomatterUpdate" on the table, but that's now done internally.

• So now the last problem.... the stickyHeader widget is interfering with the update. If you remove the stickyHeader widget, it all works perfectly.

Current demo: https://jsfiddle.net/Mottie/fy9y6x7p/4/

To Do: get stickyHeaders to cooperate.

[Mottie]

Well, it's a circular problem... I have now traced the last issue to the filter widget when it binds the sticky header clone filter inputs. It's all very frustrating and time consuming. I decided not to hold off on the release I planned for this weekend. I'll continue to isolate the problem as I find time/motivation.

[performiture]

Mottie, your demo (without sticky headers) works great if ajax takes longer to complete than tablesorter filterInit. When I tried it with real ajax call, it completed before savedFilters got initialized causing lastSearch to be overwritten with empty array. To reproduce this you can just lower the timeout to 30ms or so from 3 sec. Is there some way I can ensure the order of events here?

[Mottie]

Well, there have been some issues with race-conditions. This situation is another such case. The filter widget does wait until tablesorter has completed initialization before applying the saved search query. Triggering an "update" before the filter widget completes initialization does interfere with that sequence.

Moving the code to store the saved filters to the intialized callback function, appears to be a more reliable method, but now the select2 input isn't updating as expected: https://jsfiddle.net/fy9y6x7p/5/

[performiture]

I kind of made it work by timing the duration of ajax call and setting a minimum required timeout before calling update.

const DELAY = 1000
var ajaxStart = new Date().getTime();

$.ajax({
   success: function(json) {
        // rows are added here
        var ajaxDuration = new Date().getTime() - ajaxStart;                        
        var timeout = 0;
        if (ajaxDuration < DELAY) {
             timeout = DELAY - ajaxDuration;
        }

        setTimeout(function() {
        $('table')
          .data('lastSearch', savedFilters)
          .trigger("update");
        }, timeout);

but now select2 input is updating only if another filter is set. The filter widget search shows "Starting filter widget search:" with all list of empty strings. If another filter is set both show up in filter widget search just fine.

[Mottie]

You may not need the setTimeout if you add that ajax call to the initialized callback function.

[performiture]

The problem with moving ajax call to initialized is as you pointed out earlier select2 input not updating as expected: https://jsfiddle.net/igorsf/fy9y6x7p/7/

[Mottie]

Ok, I think I got it mostly fixed now... I needed to add a slight delay before updating the filter formatter functions.

So now this demo works, and it even works when the stickyHeaders widget is included; but the select2 within the sticky header isn't updated LOL.... one step at a time.

[performiture]

I noticed you are setting but not using savedFilters variable in the demo. It works but as soon as I add timeout to simulate ajax request, it breaks on refresh. select2 input doesn't get set
demo

[Mottie]

Oops, I should have fixed that... try this demo.

[performiture]

It now works perfectly with "select2" input. However in my app, 1 out of 4 refreshes, the columns with "filter-select" class are loosing their selected values. I tried debugging it. When update is triggered and getFilters function in widget-filter.js is called, it has the right filters in $( table ).data( 'lastSearch' ) but after the function ends it returns filters variable which is missing those "filter-select" columns.

[Mottie]

If the select2 input isn't updating, try triggering a filterFomatterUpdate event on the table. The setTimeout I recently added is set to 100ms, maybe it needs more time.

[performiture]

select2 is updating just fine. Its the other filters like <th class="filter-select" data-placeholder="Select a name">First Name</th> which sometimes resetting on refresh

[Mottie]

I can't duplicate that problem. Please modify this demo to show me the problem so I can troubleshoot it better.