vedmack / yadcf

Yet Another DataTables Column Filter (yadcf)
http://yadcf-showcase.appspot.com/
MIT License
731 stars 285 forks source link

custom_select with ajax loaded data #609

Closed sparh closed 4 years ago

sparh commented 4 years ago

Hi I am using the custom_select with jquery multiselect plugin https://github.com/ehynds/jquery-ui-multiselect-widget/

When I load the data, the filter is initialized but not refreshed after data has been populated unless I use yadcf.exFilterColumn(table, [ [0, []] ]);

Here are the demo http://admingva.ch (multiselect is initialized but empty) http://admingva.ch/2.html (as expected but I had to add this line of code : yadcf.exFilterColumn(table, [ [0, []] ]);

Hope you can find something better to make it work

vedmack commented 4 years ago

@sparh please read docs and look for code samples / previous issues on my repository

from docs:


* initSelectPluginCustomTriggers
                Description:        Allows to set any select jquery plugin initialize and refresh functions. jQuery selector will be passed to the user defined function to initialize and refresh the plugin.
                                    Great for integrating any jquey select plugin  (Selectize / MultiSelect / etc)
                Arguments:          initFunc  : function which will initialize the plugin
                                    refreshFunc : function that will refresh the plugin.
                                    destroyFunc : function that will destroy the plugin (upon table destroy even trigger).
                Usage example:      yadcf.initSelectPluginCustomTriggers(function ($filterSelector){$filterSelector.multiselect({});}, function ($filterSelector){$filterSelector.multiselect("refresh")}, , function ($filterSelector){$filterSelector.multiselect("destroy")});
sparh commented 4 years ago

Hello thanks for this but it is implemented yadcf.initSelectPluginCustomTriggers(function ($filterSelector){$filterSelector.multiselect({height: 175,minWidth: 150,selectedList:0});}, function ($filterSelector){$filterSelector.multiselect("refresh");}, function ($filterSelector){$filterSelector.multiselect("destroy");});

Have a look at my demo, the only difference between the 2 is line 95 of http://admingva.ch/2.html (the one which is working)

sparh commented 4 years ago

Hi here is a jsfiddle, so you can see it in live : https://jsfiddle.net/vg1b7ca8/3/

When data is loaded the multiselect filter is not populated unless I add this line : yadcf.exFilterColumn(table, [ [0, []]]);

wrong ok

vedmack commented 4 years ago

handled in 0.9.4.beta.35, see working jsfiddle

the problem is that your multi select is being loaded before the xhr completes, so I added a method initOnDtXhrComplete that set a callback to be called after dt xhr completes, use it like this

test page: https://jsfiddle.net/vedmack/n4dybvp1/2/

yadcf.initOnDtXhrComplete(
  function() {
    $("#yadcf-filter--example-0").multiselect('refresh');
  }
);