How to manually search datatable without updating “search” input field

jstuardo

Hello,

If I manually call:

tabla.search('Advanced:' + search).draw();

where "tabla" is a datatable, the "search" input field is updated with the search text.

The fact is that I am implementing an advanced search feature using the same field.

If user enters something in search field (the simple search), grid will refreshes automatically with the search. This is OK.

However, I have an advanced search form. When this kind of search is performed, I need the search parameter that is posted to the server to include all search fields with the word "Advanced:" prefixed. That way, in server side, I can know if the search is simple or advanced.

The problem is that when using the "search" method, the input field is updated with the search content. If advanced search is performed, this text appears in the field, for example:

Advanced:Campo_1=936969&Campo_2=&Campo_4=&Campo_7=&Campo_3=&Campo_5=&Campo_6=&Campo_8=

Is there way to avoid the search field to be updated?

Thanks
Jaime

kthorngren

I would suggest removing the default search input and create your own, similar to this example:
https://datatables.net/examples/api/regex.html

In the example if you type into the Global search search input you will see the search text appear in the default search. But if you type into the default search the text does not appear in the Global search.

Kevin

jstuardo

Hello,

Thanks... How to replace the default search field by my custom one?

If I have this "dom" definition:

dom: "<'row'<'col-sm-12 col-md-4'<\"gridToolbar\">><'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",

Can I place a custom search input instead of default input?

Regards
Jaime

jstuardo

Hello..

I have finally placed this dom:

dom: "<'row'<'col-sm-12 col-md-4'<\"gridToolbar\">><'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'<\"customSearch\">>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",

and then, on draw.dt event:

$("div.customSearch").html('<div id="facturas_filter" class="dataTables_filter"><label>Buscar:<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="facturas"></label></div>');
                $('#facturas_filter input').on('keyup', function () {
                    tabla.search($('#facturas_filter input').val()).draw();
                    $('#facturas_filter input').focus();
                });

That way it works, however, focus is not placed again in search input. How is it done by the default search input?

Regards
Jaime

colin

Hi @jstuardo ,

You could assign focus to that element in initComplete. If no joy, 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

jstuardo

Hi colin, that event is not getting called when grid is refreshed after calling "draw" method.

I tried to set the focus in draw.dt event, but it did not work either.

Regards
Jaime