Get title in a span in a data of a row

Ludoludo75

Hi there

I wanna get the title of this code :

<span class="tooltip" title="Avec projet(s)"><svg class="svg-inline--fa fa-lg fa-fw"><use xlink:href="#fa-avec-projet"></use></svg></span>

To include in this :

column.data().unique().sort().each( function ( d, j ) { select.append( '<option value="'+d+'">'+d+'</option>' ) }

How I can write after .unique() or .sort() ? (yes my code is in the row of the column).
Because at this time, all this span is included.

Thank you

Ludoludo75

Ok,

Here the solution, but i have another issue, the search doesn't work on html tag/code

column.data().unique().sort().each( function ( d, j ) {
                        var masque1 = 'title="';
                        var masque2 = '"><';
                        var longueur1 = masque1.length;
                        var position1 = d.indexOf(masque1);
                        var position2 = d.indexOf(masque2);
                        var val = d.substring(position1 + longueur1, position2);
                        select.append( '<option value="'+val+'">'+val+'</option>' )
                    } );

This code returns : "Avec projets(s)"

But for searching "Avec projet(s)" isn't find in the html, because I think DataTables just searches on real text, so how can fix that ?

Thank you

allan

I think your best bet here will be to use orthogonal data in the renderer for the column(s). Currently there is no way to make DataTables use the data from live HTML elements for the search.

Allan

Ludoludo75

Oh perfect, I love that !!
Thank you,

Just one question, what is the difference between data-search and data-filter (or they're the same thing ?)

Thank you

Ludoludo75

And also,
How I can catch the "data-search" with my above code ( column.data().unique().sort().each )

Thanks

allan

data-search and data-filter (or they're the same thing ?)

Same thing! The filter name is legacy and provided for backwards compatibility.

How I can catch the "data-search" with my above code ( column.data().unique().sort().each )

Use cells().render() to get orthogonal data:

table.cells( null, columnIndex ).render( 'search' ).unique().sort().each ...

Allan

Ludoludo75

Thank you

Ludoludo75

Ok but, I am in the initComplete of the table because I do a list with these choices (like this : https://datatables.net/examples/api/multi_filter_select.html )

So i don't know how i can determinate the table, maybe you know ? thanks

initComplete: function () {
                this.api().column( 2 ).every( function () {//quelle colonne
                    var column = this;
                    var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.header()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );
     
                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        } );
     
                    column.data().unique().sort().each( function ( d, j ) {
                        var masque1 = 'title="';
                        var masque2 = '"><';
                        var longueur1 = masque1.length;
                        var position1 = d.indexOf(masque1);
                        var position2 = d.indexOf(masque2);
                        var val = d.substring(position1 + longueur1, position2);
                        select.append( '<option value="'+val+'">'+val+'</option>' )
                    } );
                } );
            },

allan

I don't quite understand what you mean by "determine the table" I'm afraid. The API instance is configured to be the table in question (this.api()).

Allan

Ludoludo75

I understood you write "table.cells" for using outside the table
So how I can write the code without "table" ? just ".cells..." because I am inside the table.

Thank you

allan

Ah I see - thanks. use this.api() to get the API instance for the table:

initComplete: function () {
  var table = this.api();

  table.column( 2 ) ...
}

Allan

Ludoludo75

Mmhhh

It doesn't work

I wrote the code inside or even outside the first function this.api();

http://live.datatables.net/puwayolu/1/edit?html,js,output

The fonction doesn't catch the "data-search", just takes the data inside the cell (html) with a problem with " " or ' ' too

allan

Sorry - forgetting my own documentation for cells().render()! We need to pass in filter, not search: http://live.datatables.net/puwayolu/3/edit

Allan

Ludoludo75

oh thank you, it's perfect