Reloading searchPanes with custom options on Ajax load()

wadeparallon

Link to test case: https://live.datatables.net/yelucufi/7
Description of problem: I have a datatable that reloads via ajax from two different drop downs that return different data sets. I have a custom searchPane that works on first load, but I can't for the life of me get it to refresh its options when doing an ajax reload. In the test case above, I'm mimicking a different "result" by clicking the "reload" button. The searchPanes are not refreshing. I saw from another post on the forums that passing unverified reloads all of them because I'm not sure the index its asking for is the searchPane index (I have a custom order and visibility of searchPanes) or the datatable index.

Copilot is telling me to do some weird things that are getting off the rails. I can't even find the documentation for this:

datatable.column(26).settings()[0].aoColumns[26].searchPanes.options = unverifiedOptions;
datatable.searchPanes.panes[datatable.searchPanes._getPaneIndex(26)].options = unverifiedOptions;
datatable.searchPanes.rebuildPane(26, true);

More details of setup can be found here: https://datatables.net/forums/discussion/81085/searchpanes-custom-order

kthorngren

Interesting issue. Doesn't seem like there is a built in way to reload the custom options. @allan can confirm if this is the case and the feasibility of adding the capability if it is missing.

AI code doesn't always result in good or workable Datatables solutions. There is no documentation for the first two lines as they are directly accessing the private API. This is normally not recommended as the API can change without notice. Also the private _getPaneIndex() API doesn't seem to exist

WARNING: Don't do this t home

Those two lines do give some good hints where to look for the options assigned options although the paths are not correct. I updated your test case:
https://live.datatables.net/fabosicu/1/edit

It outputs the settings() object in ready(). I made some adjustments to the paths to make the options updates work. Also note the use of the callback in ajax.url().load() to wait for the async ajax response before updating the options.

I also changed this statement to allow the searches to work:

// Changed .includes(role.office) to .includes(role) to fix searching
return rowData["office"] && rowData["office"].includes(role);

If you choose to use this keep in mind the private API structure could change at anytime. I would recommend creating your own APIs for this, one for each statement, that way you can find it easier if changes are made. See the API development docs for details.

Kevin

kthorngren

I removed this line:

    // This statement doesn't seem to be necessary
    // table.settings()[0].aoColumns[2].searchPanes.options = unverifiedOptions;

Just updating the ._searchPanes.s.panes[ spIndex ].s.colOpts.options value seems to be enough for searchPanes.rebuildPane() to work. One less private API to access!

Kevin

kthorngren

I made a sample API for you called searchPanes.updateOptions():
https://live.datatables.net/fabosicu/2/edit

DataTable.Api.register( 'searchPanes.updateOptions()', function ( colIndex, options ) {
 return this.iterator( 'table', function ( ctx, index ) {
   let dt = new DataTable.Api(ctx);
   let sp = dt.settings()[0]._searchPanes;
   
   // Get the SP index for the column specified
   let spIndex = sp.c.columns.indexOf( colIndex );

   // Update the SP options for the column
   sp.s.panes[ spIndex ].s.colOpts.options = options;
 } );
} );

It's called like this:

    table.searchPanes.updateOptions(2, unverifiedOptions);
    table.searchPanes.rebuildPane(2, true);

It doesn't keep track of the previously selected options so passing true to searchPanes.rebuildPane() doesn't work. I'm sure its possible to keep track of the previous selections then reselect the appropriate rows from the new options but it would definitely take some work.

Kevin

wadeparallon

Woah thats pretty clean. Thanks for the work on this. I've attempted to implement, but when it gets into the plugin:

It doesn't have any columns. I've inspected the ctx, and the dt object and no columns are being shown in the debugger.

I see my options update in the variable unverifiedOptions, but nothing gets reflected on UI.

datatable.ajax.url(`/Projects/GetProjects/${organizationId}/${startYear}`).load(function (json) {
                    GetUnverifiedRoles(organizationId);
                    datatable.searchPanes.updateOptions(26, unverifiedOptions);
                    datatable.searchPanes.rebuildPane(26, true);
});

And no, not worried about keeping track of selections. Its a whole new dataset. All the other search panes get blown away with new data automatically, just this custom one isn't.

kthorngren

Are you using the latest SP version? The test case is using the current version.

Use this code to look through the settings object for _searchPanes:

table.ready(function () {
  console.log( table.settings()[0] )
})

Maybe you will find something a bit different. If you have a different version then the paths I used might be different.

Can you post a link to a test case showing the issue so we can help debug?

Kevin

wadeparallon

I've copied directly out of the the test case, its just not working for me in my project. Your test case works wonderfully and in the example its perfect.

Let me look at my current version of searchPanes: sp-2.3.3

wadeparallon

I upgraded to 2.3.4

This is the error, and I think its because I'm not seeing any columns.

wadeparallon

sp.s.panes[ 13 ].s.colOpts.options = options;

I just drilled down and found the index of the SP that I wanted to update (didn't go for dynamic)... and it works fine.

Will go with this for now.

kthorngren

What does spIndex end up being?

Take a look at this:

table.ready(function () {
  console.log( table.settings()[0]._searchPanes.c.columns )
})

What is the array you see? You can post it here.

You have datatable.searchPanes.updateOptions(26, unverifiedOptions);. You should see 26 in the array. Is it at array index 13?

Kevin