custom rendering in SearchPanes

tacman1123

I have some fancy rendering for language and country code that displays those things in their user's language (and flag for the countryCode). It works fine when rendering a column, but I'd like to have that column value rendered in the searchPane's dropdown itself.

https://www.museado.org/es/mus/owner-browse

I've read https://datatables.net/extensions/searchpanes/rendering and I think the issue is that I'm using Ajax to get the data and the searchPanes. From the documentation, it looks like the searchPanes dropdown will be rendered using the same javascript as the column.

Is it possible for SearchPanes to have its own rendering of the values?

The code that creates all this is pretty complicated (read: messy), I guess the first question is if it's even possible with AJAX. Thanks.

kthorngren

Not sure I totally understand the issue/requirement but possibly you will need to define orthogonal data like this example.

Kevin

tacman1123

The link to orthogonal data is broken.

The example link, about rendering arrays, doesn't seem at first glance to fit my issue.

When I render a country column, I pass in the 2-char country code, and emit a span with a class of fi fi-[cc], which calls the flagIcon library.

Then I add some data attributes, which calls a stimulus library, which renders a country name in the language from the user's browser. Obviously, all this happens after a bit of a delay, to load an execute the javascript.

There are two issues:

• After the js renders the flag and country name, the column with needs to be adjusted.
• The country code is a searchPanes column, but all it shows is the 2-char code. How can I render the searchPanes value differently, if that's coming from javascript?

On a related note: thank you for changing many of the example from jQuery to vanilla javascript. That's been very helpful. In your next round of documentation updates, would you consider moving away from number-based configuration?

Since all my datatables are defined dynamically, I find code like

layout: {
        top1: {
            searchPanes: {
                columns: [3]
            }
        }
    }

very difficult to implement. Someday, maybe

            searchPanes: {
                columns: ['location']
            }
        }

or in the column definitions

columns: [
    name: ..
    render: ...
    searchPanes: {}

Just an idea.

kthorngren

The link to orthogonal data is broken.

Right, I meant to use columns.searchPanes.orthogonal.

After the js renders the flag and country name, the column with needs to be adjusted.

How does this happen? Are you doing this in columns.render or somewhere else?

The country code is a searchPanes column, but all it shows is the 2-char code. How can I render the searchPanes value differently, if that's coming from javascript?

Every solution is different. Without seeing what you have its hard to offer specific suggestions. Please post a link to a test case showing an example of your solution.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

I took this rendering example and added SearchPanes:
https://live.datatables.net/socirone/17/edit

This solution applies the classname f32 to the cells to allow the flags library to work. It uses columns.render to return a span with a country notation for the class. Note the use of columns.searchPanes.dtOpts to apply the same f32 classname. For this solution this is all that is needed to display the flags in the SearchPane. It sounds like the library used in this example operates differently then what you are using.

Kevin

tacman1123

thanks, this is very helpful.

in the example, what does info: true mean? Where can I find docs on what options are available.

I see how className works, but the library I'm using needs a data attribute, e.g. data-language="en". Is it possible to add attributes when defining the column?

In the end, though, I'm still missing the link between the searchPanes and the columns. I do have a custom rendering function, which renders the data correctly in the table. But the searchPanes only renders the raw data. How to I link the column renderer to searchPanes?

render = (data, type, row, meta) => { };

            column.render = render;
            column.searchPanes = {
                show: c.browsable,
                dtOpts: {
                    info: true, /* ?? */
                    columnDefs: [
                        {
                            targets: 0, /* <<-- what is this for? */
                            className: 'f32'
                        }
                    ]
                }
            };

It's close -- the column renders, but not the datatable item, which I know is a datatable as well (I guess the targets: 0 is the first column, the second one being the counts?

kthorngren

what does info: true mean? Where can I find docs on what options are available.

It is the info option to display the information about the table. columns.searchPanes.dtOpts uses the same options as the Datatable. They are documented here.

needs a data attribute, e.g. data-language="en". Is it possible to add attributes when defining the column?

You can use columns.createdCell in columns.searchPanes.dtOpts to add the data attribute.

But the searchPanes only renders the raw data. How to I link the column renderer to searchPanes?

I'm not familiar with the code syntax you are using but my understanding is the SearchPane for a particular column will default to displaying the value of the display operation described in the orthogonal data docs. They should be the same unless you are using columns.searchPanes.orthogonal. This is demonstrated in my example by using the display operation. Again we will need to see an example of this to help debug.

targets: 0, /* <<-- what is this for? */

The searchPane is a Datatable with two columns, indexes 0 and 1. The columns.searchPanes.dtOpts config is applying the classname f32 to the first column of the SearchPane.

Kevin

tacman1123

Here's an abbreviated example:

https://www.museado.org/en/mus/owner-browse

You can see that the country and lang columns are displayed differently than their counterparts in searchPanes.

I've added a console.warn for each column to make it easier to see the configuration.

The code that creates the columns is here:

https://github.com/survos/SurvosApiGridBundle/blob/main/assets/src/controllers/api_grid_controller.js#L121-L148

Something is preventing the render function from being called in the searchPanes the same way it's being called in the table.

tacman1123

searchPanes are defined in a few different places in my code, perhaps something is overwriting the column configuration, e.g.

https://github.com/survos/SurvosApiGridBundle/blob/main/assets/src/controllers/api_grid_controller.js#L564-L575

I've tried disabling the columnDefs configuration, and commenting out other things, but still the render isn't happening. I'm sure somewhere in my complicated code something is stepping on something else.

kthorngren

You have server side processing enabled. To populate the SearchPanes the server is returning this data:

I don't have a way to try SearchPanes with server side processing but I suspect you might need to use columns.render in columns.searchPanes.dtOpts for the CC pain to render the HTML needed to display the flag. The render function for the CC column is returning something like this for the display operation:

                                        <span class="fi fis fi-us"></span>
                <span data-locale-display-target="country" data-cc="us"></span>

I placed a breakpoint in initComplete and Datatables renders this table:

Note that just the flag shows due to the rendered span elements. The full contry name appears at some point later. I'm not sure where this code is or what it does but you may need to execute it against the SearchPanes CC column once you get the span in place.

In addition the full country name is added to the cells but Datatables is not aware of this as its added not using Datatables APIs. So you won't be able the type United States in the search input to find the US rows, for example. Also the column width is off because of this:

You might be able to fix it using columns.adjust() after the code runs to add the full name. Or you will need to make this change in a way that Datatables knows about it. See this FAQ. If you want help with this then point us to the code that makes this update.

Kevin

kthorngren

So you won't be able the type United States in the search input to find the US rows, for example.

You wouldn't be able to search for "United States" anyway because of server side processing

Kevin

tacman1123

Thank you for your detailed answer and deep-dive.

So you won't be able the type United States in the search input to find the US rows, for example.

Hmm, good point, I'll need to populate that somehow as well.

So I think the missing link is rendering the searchPane column.

use columns.render in columns.searchPanes.dtOpts

Can you provide an example of that, where rendering is simply adding an '!!' to the label? I'm still confused about column, columns, and columnDefs.

kthorngren

Can you provide an example of that, where rendering is simply adding an '!!' to the label?

https://live.datatables.net/socirone/21/edit

Kevin

kthorngren

I'm still confused about column, columns, and columnDefs.

do you have specific questions we can answer?

Kevin