Exclude columns from search but with a select option

Ludoludo75

Hi
I have a select input just in the header of one column with differents values, and in my rows, thoses values appear like icon-svg, not text

To work with this select, "searchable" must have to true in columndefs
my problem, I would like exclude this column in the input search,
I've tried with : this.api().table().columns( [2, 3] ).search( val ).draw();
My column with select is the 1st
Val is the value of the input which I catch.

But there is no entry

Thanks

colin

Hi @Ludoludo75 ,

That's not possible, I'm afraid. The select input is still doing a search on the table, albeit just a column search, so that column needs to be searchable, which means it will hit on all searches.

Cheers,

Colin

Ludoludo75

Ok thanks for your answer

Select input can't work like sorting/filtering just and not with "searching" maybe ?

Also, why my code doesn't work with selected columns ?

thanks

colin

Hi @Ludoludo75 ,

It's hard to say without seeing your code! We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Ludoludo75

Yes, there : http://live.datatables.net/daburuce/1/

Thanks

kthorngren

the search seems to work correctly. I'm not sure I understand the issue. Are you trying to have sorting working in the same columns with the drop down search?

If so then this thread should help you create a second header row for the search inputs while keeping sorting in the top header row using orderCellsTop.

If this is not the issue or doesn't help please provide detailed steps of how to recreate the issue.

Kevin

colin

Hi @Ludoludo75 ,

I see what you're trying to do, but that won't work I'm afraid.

This here:

table.columns( [2, 3, 4] ).search( val ).draw();

is the same as

table.column( 2 ).search( val ).draw();
table.column( 3 ).search( val ).draw();
table.column( 4 ).search( val ).draw();

It's expecting val to be in each of the columns, they're ANDed together, so that will result in no matches.

One thing you could do, which may be acceptable, is to have input elements on each column similar to your dropdowns, something like this.

Would that work?

Cheers,

Colin

Ludoludo75

Hi,

OK thank you,

So I changed a bit my code.
Now, I have a 5th column which is hidden (I use this column for data row group) with those characteristics :

{
                "targets": [ 5 ],
                "searchable": false,
                "orderable": false,
                "visible": false
            }

I suppressed the select input in the header and the "data-search" in the td of the row (of my 1st column)

And I had a button for selecting certain data in this 1st column with this code :

{
                text: '<svg class="svg-inline--fa fa-lg fa-fw"><use xlink:href="#fa-en-cours"></use></svg>',
                titleAttr: 'En cours',
                action: function ( e, dt, node, config ) {
                    dt.column( 1 ).search( 'En cours' ? '^En cours$' : '', true, false ).draw();
                    $(".dt-buttons").find(".bouton-selectionne").removeClass("bouton-selectionne");
                    node.addClass("bouton-selectionne");
                }
            },

So, maybe I can use the 5th column to have exactly the same result (Just displaying rows with the data "En cours" in the td of the 5th column) ? But I don't know how (without searchable true and visible true because I don't want this data appear on the results of the search)

Maybe with "dt.column( 5 ).cell().data()" ?

Thank you

colin

Hi @Ludoludo75 ,

I'm getting muddled as to what you're trying to achieve. It would be worth updating your test case, to show the current code, and to also say what it is you want the code to do. That'll help us to understand the goal.

Cheers,

Colin

Ludoludo75

Hi

Still the same problem ! aahahah

I have a column with a sort of data (integer : 1, 2, 3, 4, 5) which is hidden.
I have 5 buttons, button #1 for integer 1, ...

I would like display the rows with integer 1 by clicking button 1, but i don't want the number 1 searchable in the search form by the user.

(Because my column is not searchable with columnDef, and code : dt.column(1).search( "1" ? "^1$" : "", true, false ).draw() doesn't work)

Is it possible now two years later ? ahaha

Thank you

kthorngren

You will need to create a search plugin to search columns that you have used columns.searchable to disable. Normally with a search plugin you would use the searchData (2nd) parameter. But that won't work with columns.searchable set false. You will need to use the rowData (4th) parameter. I updated one of my examples to demonstrate this:
http://live.datatables.net/wenaxuti/182/edit

Kevin

Ludoludo75

Ohh yeah perfect !!

Really thank you,

I adapted that with buttons (juste one clicked at the same time, so just one value in the array ; when button type 0 is clicked (array are empty), all rows are displaying, and it's necessary for the first display of the page) :

`var filter = [];

$.fn.dataTable.ext.search.push(
    function( settings, searchData, index, rowData, counter ) {
        if ( filter.length === 0 || filter.includes(rowData[1]) ) {
            return true;
        }
        return false;
    }
);

function filterTable (data, dt, node) {
    if ( data === "0" ) {
        filter.length = 0;
    }
    else {
        filter.length = 0;
        filter.push(d);
    }
    dt.draw();
}`

and for buttons (one example) :

{ text: "Type 1", action: function ( e, dt, node, config ) { filterTable( "1", dt, node); } },