Filter column after "ENTER" in keyboard is pressed

Filter column after "ENTER" in keyboard is pressed

IvantntIvantnt Posts: 5Questions: 1Answers: 0

Hello would like that the table start to search for results after "ENTER" in keyboard is pressed and not during the typing
I have integrated my datatable with a code like this below and it partially work but i don't know how to get the value entered in the input field over the coloumns and filter for the right coloumn.
In the example below i take the value of the first coloumn, table.column(1)...., but how to take it dinamically?

       $('thead input').unbind();
       $('thead input').bind('keyup', function(e) {
           var searchTerm = $('#1').val().trim();

           if(e.keyCode == 13)
               table.column(1).search(searchTerm).draw();
           }
       });

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Answers

  • kthorngrenkthorngren Posts: 20,257Questions: 26Answers: 4,761

    See if this example helps. Remove the keyup event if you want to search only on enter.

    Kevin

  • colincolin Posts: 15,142Questions: 1Answers: 2,586

    There's been an option since 1.11 for this - search.return, please see example,

    Colin

  • IvantntIvantnt Posts: 5Questions: 1Answers: 0
    edited June 2023

    Hello Kevin,
    yes it works in this way!

    [code]
    var table=$('#content-table').DataTable({
    initComplete: function () {
    this.api()
    .columns()
    .every(function () {
    var column = this;
    var title = column.footer().textContent;

                    // Create input element and add event listener
                    $('<input type="text" placeholder="Search ' + title + '" />')
                        .appendTo($(column.footer()).empty())
                        .on('change clear', function () {
                            if (column.search() !== this.value) {
                                column.search(this.value).draw();
                            }
                        });
                });
        },
    

    etc...........

    The problem now is that i use AJAX in my datatable and the queries are being performed server-side for every operation (search, sort, etc) and my table, with "input" fields over the coloumn are done in this way:

    [code]

    <

    table id="content-table" class="table" width="100%">
    <thead>
    <tr>
    <th class="hide_column"></th>
    <th><input type="text" id="1" class="tabella-input att" ></th>
    <th><input type="text" id="2" class="tabella-input taio" ></th>
    <th><input type="text" id="3" class="tabella-input mod" ></th>
    <th><input type="text" id="4" class="tabella-input tar" ></th>
    <th><input type="text" id="5" class="tabella-input ins" ></th>
    <th></th>
    </tr>
    etc............

    Soi how can i adapt the code above to my dataTable?

    Thank you very much
    Ivan

  • kthorngrenkthorngren Posts: 20,257Questions: 26Answers: 4,761

    That code should work whether using server side processing or not. The column().search() terms will be sent in the ajax request. See the SSP protocol docs for details. If you are using a Datatables supplied SSP script then the searches should work. If not then the capability may need to be added to your script.

    Are you using a Datatables supplied SSP script?

    Kevin

  • IvantntIvantnt Posts: 5Questions: 1Answers: 0

    Hello i found the problem and now it works perfectly in the footer but i need the filter in the header so i changed the code in this way below and the now are in the header.

            initComplete: function () {
                this.api()
                    .columns()
                    .every(function () {
                        var column = this;
                        var title = column.header().textContent;
         
                        // Create input element and add event listener
                        $('<input type="text" ' + title + '" />')
                            .appendTo($(column.header()).empty())
                            .on('change clear', function () {
                                if (column.search() !== this.value) {
                                    column.search(this.value).draw();
                                }
                            });
                            
                    });
            },
    

    But now i have another problem, switching the filter in the header it also put the sort arrow next to the filter instead that next to the labels and that let the input field don't work

    If i disable the sort arrow the input fields work perfectly.
    Before of this changing it works before the input fields were not in a <thead> tag

    Infact now the HTML of the table is

    <table id="content-table" class="table table-bordered table-hover" width="100%">
        <thead>
            <tr>
                <th class="hide_column"></th>
                <th><input type="text" id="1" class="table-input " ></th>
                <th><input type="text" id="2" class="table-input " ></th>
                <th><input type="text" id="3" class="table-input " ></th>
                <th><input type="text" id="4" class="table-input " ></th>
                <th><input type="text" id="5" class="table-input " ></th>
                <th></th>
            </tr>
        </thead>                        
        <thead>
            <tr>
                <th class="hide_column" data-class="expand"><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label1);?></span></th>
                <th data-class="expand" ><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label2);?></span></th>
                <th data-class="expand" ><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label3);?></span></th>
                <th data-class="expand" ><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label4);?></span></th>
                <th data-class="expand" ><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label5);?></span></th>
                <th data-class="expand" ><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label6);?></span></th>                       
                <th data-hide="phone" ><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label7);?></span></th>
            </tr>
        </thead>
    
    </table>
    

    So do you know how can i solve this? i mean moving the sort arrow next to the labels? Maybe using thead->ID?

    Thank you very much
    Ivan

  • kthorngrenkthorngren Posts: 20,257Questions: 26Answers: 4,761

    The recommended solution is to use two header rows. One for sorting and the other for the search inputs. See this example. Note the use of orderCellsTop to apply the sorting event handlers to the top row.

    Kevin

  • IvantntIvantnt Posts: 5Questions: 1Answers: 0

    So you mean 2 <thead> rows one for the input filters and one for the labels like this code

    <table id="content-table" class="table table-bordered table-hover" width="100%">
        <thead>
            <tr>
                <th class="hide_column"></th>
                <th><input type="text" id="1" class="table-input " ></th>
                <th><input type="text" id="2" class="table-input " ></th>
                <th><input type="text" id="3" class="table-input " ></th>
                <th><input type="text" id="4" class="table-input " ></th>
                <th><input type="text" id="5" class="table-input " ></th>
                <th></th>
            </tr>
        </thead>                       
        <thead>
            <tr>
                <th class="hide_column" data-class="expand"><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label1);?></span></th>
                <th data-class="expand" ><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label2);?></span></th>
                <th data-class="expand" ><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label3);?></span></th>
                <th data-class="expand" ><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label4);?></span></th>
                <th data-class="expand" ><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label5);?></span></th>
                <th data-class="expand" ><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label6);?></span></th>                      
                <th data-hide="phone" ><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label7);?></span></th>
            </tr>
        </thead>
     
    </table>
    

    and then try to apply the code in the example ?

    I try and i let you know.

    Ivan

  • kthorngrenkthorngren Posts: 20,257Questions: 26Answers: 4,761

    The example clones the original single header. Look at the HTML tab of the example. You can either do that or just create two thead rows. Not sure if the second thead in line 13 will cause issues with how Datatables processes the header. You may want to remove lines 12 and 13 for one thead.

    Kevin

  • IvantntIvantnt Posts: 5Questions: 1Answers: 0

    Finally i found the solution thanks to your help and your example here and now the datatable starts the filter search just when the enter button in pressed, i did in this way:

    • this is my table
                        <table id="content-table" class="table table-bordered table-hover" width="100%">                        
                            
                            <thead style="background: rgba(255,255,255,0.8);">
                                
                                <tr class="filters">
                                    <th class="hide_column"></th>
                                    <th><input type="text" id="1" class="tabella-input" ></th>
                                    <th><input type="text" id="2" class="tabella-input" ></th>
                                    <th><input type="text" id="3" class="tabella-input" ></th>
                                    <th><input type="text" id="4" class="tabella-input" ></th>
                                    <th><input type="text" id="5" class="tabella-input" ></th>
                                    <th></th>
                                </tr>
                                
                                <tr>
                                    <th class="hide_column labels" data-class="expand"><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label);?></span></th>
                                    <th class="labels" data-class="expand"><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label);?></span></th>
                                    <th class="labels" data-class="expand"><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label);?></span></th>
                                    <th class="labels" data-class="expand"><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label);?></span></th>
                                    <th class="labels" data-class="expand"><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label);?></span></th>
                                    <th class="labels" data-class="expand"><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label);?></span></th>                      
                                    <th class="labels" data-hide="expand""><span rel="tooltip" data-placement="top" data-html="true"><?php echo($label);?></span></th>
                                </tr>
    
                            </thead>
                        </table>
    
    • and this is the code
    var table=$('#content-table').DataTable({
        "initComplete": function() {
                var api = this.api();
                // For each column
                api.columns().eq(0).each(function(colIdx) {
                    // On every keypress in this input
                    $('input', $('.filters th').eq($(api.column(colIdx).header()).index()) )
                        .off('keyup change')
                        .on('change', function (e) {
    
                                     e.stopPropagation();
                            api
                                .column(colIdx)
                                //.search(this.value)
                                .search(this.value)
                                .draw();
                             
                        });
                });
            },
    });
    
    • and the result is this

    So since i have greatly simplified do you think it is correct? Or maybe it need some adjust?
    Thank you very much
    Ivan

  • allanallan Posts: 61,627Questions: 1Answers: 10,090 Site admin

    I think that looks good.

    At some point we should make a plug-in or extension to make this sort of interaction easier. It is a fairly common pattern.

    Allan

Sign In or Register to comment.