CODEWITHSUNDEEP
datatables
Anton Lyhin
Anton Lyhin

Reputation: 1945

Bootstrap datatable: search filter, clear icon issue

datatables.min.css datatables.min.js 2.1.4 jquery, 3.3.5 bootstrap, 1.10.8 datatables

Clear icon does not appear on search filter input for chrome, firefox, but it appears in IE10 and later. Can be easily reproduced in bootstrap sample (https://www.datatables.net/manual/styling/bootstrap ).

When I add my implementation of clear icon the default one also appears in IE.

Is there a simple workaround to turn off extra clear icon for some browsers?

Upvotes: 1

Views: 5929

Answers (3)

Pankaj Shinde
Pankaj Shinde

Reputation: 3689

Bootstrap's styling removes the clear icon from the search input from bootstrap datatable. This is part of Bootstrap's default behaviour.

Add this to your CSS:

input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
}

It will override Bootstrap's hiding of the clear button.

Upvotes: 2

Cristian Arteaga
Cristian Arteaga

Reputation: 1

This solution worked for me:

<script>
$(document).ready(function() {

$('.dataTables_filter input').addClass('searchinput');
$('.dataTables_filter input').attr('placeholder', 'Buscar');

$(".searchinput").keyup(function () {
        $(this).next().toggle(Boolean($(this).val()));
    });
    $(".searchclear").toggle(Boolean($(".searchinput").val()));
    $(".searchclear").click(function () {
        $(this).prev().val('').focus();
        $(this).hide();
        var table = $('#dt_basic').DataTable();
        //clear datatable
        table
            .search('')
            .columns().search('')
            .draw();
    });

});
</script>

css:

.searchclear {
    float:left;
    right:22px;
    top: 8px;
    margin: auto;
    font-size: 18px;
    cursor: pointer;
    color: #ccc;
}

and in jquery.dataTables.min.js you need add the icon remove-circle after input:

original code

'<input type="search" '+c.sFilterInput+'"/>'

new code

<input type="search" '+c.sFilterInput+'"/><span id="searchclear" class="searchclear glyphicon glyphicon-remove-circle"></span>'

example image

Upvotes: 0

Anton Lyhin
Anton Lyhin

Reputation: 1945

This is html5 issue:

/* Disable browser close icon for IE */
input[type="search"]::-ms-clear {  display: none; width : 0; height: 0; }
input[type="search"]::-ms-reveal {  display: none; width : 0; height: 0; }
/* Disable browser close icon for Chrome */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }

Here is an article for more details on html5 input[type="search"] disabling

Upvotes: 1

Related Questions