[ColumnControl] Display only specific text in filter dropdown

raph2209

Hello All,

I'm testing the new "ColumnControl" extension of DataTables.
One of my columns contains complex HTML content (a link and an action button). However, the dropdown filter menu is rendering the full HTML content as-is.

Example of content HTML of this column :

<td class="text-left sorting_1" data-search="AFFICHARD Michèle" data-filter="AFFICHARD Michèle" data-order="AFFICHARD Michèle">
<a href="/personne/786064"><strong> AFFICHARD</strong> Michèle</a>
<a class="pl-2 modal-details-personne" data-id-personne="786064">
<i class="fa-solid fa-eye font-small-3" data-bs-toggle="tooltip" data-bs-placement="top" 
data-bs-title="Aperçu de la fiche" aria-hidden="true"></i></a>                                                      </td>

Instead, I would like it to use only the value from the data-filter or data-order attribute for filtering and display purposes.

How can this be achieved?

rf1234

Use https://datatables.net/reference/option/columns.render
with a function:

Just return the content of the data-filter attribute from the function.

Like this for example:

columns: [       
    {   data: "yourField",
        render: function ( data, type, row ) {
            return data.split('data-filter="').pop().split('"')[0];
        }    
    },

The above returns AFFICHARD Michèle as the column content.

I found this here by the way:
https://stackoverflow.com/questions/14867835/get-substring-between-two-characters-using-javascript

allan

The data-search attribute will be used for the value of the option to be searched, but will use the display for the label, which appears to be the issue here. I hadn't actually thought of providing an orthogonal data point for ColumnControl's search list options. Perhaps that is something I should do. Added to the list and I'll look into that next week.

Allan