SearchPanes custom Order

wadeparallon

I am currently creating a Custom Search pane with Custom Options. I have it working but it is completely ignoring the Order value. I've created several on the same Datatable manually typing out an array, but in this instance I'm gathering the options from an ajax call before the datatables is loaded.

success: function (response) {
                response.forEach(function(role) {
                    unverifiedOptions.push({
                        label: role.name,
                        value: function (rowData, rowIdx) {
                            return rowData["unverifiedRoles"] && rowData["unverifiedRoles"].includes(role.name);
                        },
                        order: role.order
                    });
                });

            }

Then in the search panes:

Again, this works, it filters the data as intended, but the order in the SearchPane lists the order in this order:
10-19 (in order) then lists 2-9 (in order).

I thought maybe it was doing a string sort, so I did a parseInt(role.order) and it had no affect.

I'm a little confused.

kthorngren

I found this thread which has a test case trying to use order and its not working. Then I found this thread where Allan added the order capability. I updated the test case in the first thread to use the latest versions and it still didn't work.
https://live.datatables.net/bamuvuno/2/edit

Looking at the searchPanes code Allan made the change in SearchPane.prototype._getComparisonRows. I also found SearchPaneCascade.prototype._getComparisonRows which doesn't have that change. The test case had searchPanes.cascadePanes enabled so the order property was not used. Commenting out // cascadePanes: true, allows order to work.

Do you have searchPanes.cascadePanes enabled?

@allan might need to add support for order to SearchPaneCascade.prototype._getComparisonRows. Also there is no documentation for order to searchPanes.panes.options and searchPanes.panes.options.

Kevin

wadeparallon

I do not have cascadePanes enabled. I think we found the same threads as this is in my code:

viewCount: false, //This is buggy
viewTotal: false, //This can't be used with CascadePanes (see below comment)
//cascadePanes: true, //Note: When loading SearchPanes options over ajax, but then not using serverSide processing, neither searchPanes.cascadePanes or searchPanes.viewTotal are supported.

I am getting my data via Ajax.

kthorngren

Are you using the ajax option? I could be wrong but I don't believe this will affect the use the order option.

It's hard to tell from your code but I assume you are using jQuery ajax() to fetch the options in your first code snippet. Use of success is not supported in the ajax option:

success - Must not be overridden as it is used internally in DataTables. To manipulate / transform the data returned by the server use ajax.dataSrc (above), or use ajax as a function (below).

I wonder if you need to move the Datatables initialization into the success function after building the unverifiedOptions object. Since ajax is asynchronous that object might not be build when Datatables is initialized. However in the debugger you might be seeing the built unverifiedOptions object but not what Datatables used.

It's hard to say what the problem might be with just a couple small code snippets. I would first start by outputting the unverifiedOptions to the console. Make a copy of it to assign directly in your application. Comment out the ajax request. Does it work with hard coded data?

Can you post a link to a test case showing the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

wadeparallon

Yeah I encountered those issues, I'm populating datatables data through ajax, but the variable I'm giving to the SearchPanes for options is created before initialization of datatables and not in the same call ajax call.

If its not working in your test case you updated, it ain't going to work in mine.

kthorngren

If its not working in your test case you updated, it ain't going to work in mine.

Sorry if my comments are confusing. This test case does work:
https://live.datatables.net/bamuvuno/2/edit

As I said commenting out // cascadePanes: true, allows it to work. You can see LOWS is listed last which is defined by the order. Otherwise it will be listed after CRITICALS.

but the variable I'm giving to the SearchPanes for options is created before initialization of datatables and not in the same call ajax call.

Ok, but Ajax is asynchronous. The best way to verify the `` is populated with what is expected is to use console.log(JSON.stringify( unverifiedOptions )); on the line before Datatables is initialized. What does this output show?

Kevin

wadeparallon

I made it synchronous to get around that issue. The breakpoint shown above is the JS debugger, where the variable is populated with an array of options at time of column creation in datatables.. here is my call:

Please note async: false,

$.ajax({
            url: '/Projects/GetCurrentLaborRoles',
            type: 'GET',
            async: false,
            data: { organizationId: organizationId },
            success: function (response) {
                response.forEach(function(role) {
                    unverifiedOptions.push({
                        label: role.name,
                        value: function (rowData, rowIdx) {
                            return rowData["unverifiedRoles"] && rowData["unverifiedRoles"].includes(role.name);
                        },
                        order: role.order
                    });
                });

            },
            error: function (xhr, status, error) {
                console.error("Error fetching GetCurrentLaborRoles: " + error);
            }
        });

....................

   const datatable = new DataTable("#ProjectsDatatable", {
        ajax: {
            url: "/Projects/GetProjects/" + $('#organization').val(),
            type: "GET",
            dataType: "JSON"
        },

....................

top2: {
                searchPanes: {
                    initCollapsed: true,
                    orderable: false,
                    viewCount: false, //This is buggy
                    viewTotal: false, //This can't be used with CascadePanes (see below comment)
                    //cascadePanes: true, //Note: When loading SearchPanes options over ajax, but then not using serverSide processing, neither searchPanes.cascadePanes or searchPanes.viewTotal are supported.
                                            
                    ]
                    
                }
            },

This is my break point ON the line of creating datatables, the variable is populated. The options DO show in the drop down, just not ordered correctly.

I'll see if I can get a test case going with your example.

kthorngren

We have to be sure, since we can't see it, that the async nature of Ajax requests is not causing unexpected values

I built a test case based on your code. It needed some refactoring to work in the https://live.datatables.net/ environment. It has ajax loaded data and uses something similar to your above ajax request fetching the options.
https://live.datatables.net/yelucufi/1/edit

The order is set by the order option.

Maybe try a breakpoint in dataTables.searchPanes.js in the function SearchPane.prototype._getComparisonRows. Maybe place a breakpoint on the return rows; at the end of the function. Interrogate the options object. What do you find?

Kevin

wadeparallon

Hey it works in your example! I was just about to come back and mention that when I manually type out the values they DO work... but those are usually only a few options...

OKAY I see the issue.. check this out https://live.datatables.net/yelucufi/3/edit

Now look at the order.

kthorngren

Right, you mentioned sorting was string based instead of numeric. Sorry forgot about that. I'm not sure how the order is applied. @allan will need to take a look.

A workaround appears to be to set the columns.type to num for the SearchPanes column using columns.searchPanes.dtOpts. For example:
https://live.datatables.net/yisomaci/1/edit

Kevin

wadeparallon

Crazy work around, but it works. Thanks.