Exclude columns from search but with a select option

Exclude columns from search but with a select option

Ludoludo75Ludoludo75 Posts: 41Questions: 8Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • Ludoludo75Ludoludo75 Posts: 41Questions: 8Answers: 0

    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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • Ludoludo75Ludoludo75 Posts: 41Questions: 8Answers: 0
  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951

    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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599
    edited December 2018

    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

  • Ludoludo75Ludoludo75 Posts: 41Questions: 8Answers: 0
    edited July 2019

    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

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    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

  • Ludoludo75Ludoludo75 Posts: 41Questions: 8Answers: 0
    edited January 2022

    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

  • kthorngrenkthorngren Posts: 21,336Questions: 26Answers: 4,951
    Answer ✓

    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

  • Ludoludo75Ludoludo75 Posts: 41Questions: 8Answers: 0
    edited January 2022

    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); } },

Sign In or Register to comment.