How exclude hidden element from search

Kosmikos

Hello, i have datatable with hidden div in one column.
I need this div for show data in tooltip.
Trouble: when i search - i find text in this hidden div. But i dont want.

Here js and other details

Brief example:
row:

        <td>Tiger Nixon (trouble here)</td>
        <td>System Architect</td>
        <td>Edinburgh</td>
        <td>61</td>
        <td>2011/04/25</td>
        <td>$3,120
           <div style="display:none;">                 
              <table class="table">
                            <thead>
                                <tr>
                                    <th>UniqCode</th>
                                    <th style="width:20%;">Status</th>
                                </tr>
                            </thead>
                            <tbody>                                    
                                    <tr>
                                        <td>hidden text</td>
                                        <td>                                                
                                        </td>
                                    </tr>                                   
                            </tbody>
                </table>
           </div>
        </td>

Type to Search: hidden
Result: i see this row.

But if i type to input on header - all work as i want.
I'm confused.

I tried to find a solution on Google, but that cannot help me

colin

You can disable search for specific columns with columns.searchable,

Colin

Kosmikos

Thank you, but I should see the column ('Salary' in example) and should have search on the column. I can't disable search.
If i disable visible (before i moved div to new column)- column disapear from table(DOM), and i can't find hidden div for show it in tooltip.

Kosmikos

I updated the example here

colin

That's because you're adding them here:

  $('#example>thead>tr>th').each(function () {
        var title = $(this).text();
        $(this).html(title + '<br><input class="form-control" type="text" />');
    });

Just add them to the columns you want them on, and then pass an array into columns() saying which ones you want there to.

Colin

Kosmikos

Sorry, I don't understand.
I create table by this code

var table = $('#example').DataTable(
    {
        "paging": true,
        "info": true,
        "lengthMenu": [[10, 50, 100, -1], [10, 50, 100, "All"]],
        "columnDefs": [
            //{ "targets": 'no-sort-search', "searchable": false, "orderable":false },
            { "targets": 'no-sort', "orderable": false },
            { "targets": 'no-search', "searchable": false },
            { "targets": 'no-visible', "visible": false }

        ]
    }
     );

I did not use dynamic column creation

To demonstrate the problem, enter text 'hidden' to Search field and then you will see one row which does not include the search text.
But the row contains this text in hidden div.

tangerine

The row in question includes a table in the Salary column which has the word "hidden" in it. I don't understand what you are trying to do with that.

Kosmikos

Yes, but the text is in a hidden tag.
Inside div style="display:none;".
I want the DataTable not to search inside the hidden tag.

If I input text 'hidd' to input above column 'Salary' i will see 'trouble row'.

colin

Ah, I see, you can use columns.render to filter that - see here.

Colin

Kosmikos

Ouh, thank you, Colin.
This is what I need. I spent a day looking for a solution and burned gigabytes of nerve cells.

This is Colin solution from link:

var table = $('#example').DataTable(
    {
        "paging": true,
        "info": true,
        "lengthMenu": [[10, 50, 100, -1], [10, 50, 100, "All"]],
        "columnDefs": [
               { targets: 5, render: function(data, type) {
                return type === 'filter'? data.split('<')[0] : data;
               }}    
        ]
    }
  );