Question

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

Chrome，firefox的搜索过滤器输入中没有显示清除图标，但它出现在IE10及更高版本中。可以在bootstrap示例（https://www.datatables.net/manual/styling/bootstrap）中轻松复制。

当我添加清除图标的实现时，默认图标也会出现在IE中。

是否有一个简单的解决方法可以为某些浏览器关闭额外的清晰图标？

Answer 1

这是html5问题：

/* 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

Answer 2

这个解决方案对我有用：

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

并在 jquery.dataTables.min.js 中，您需要在输入后添加删除圈图标：

原始代码

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

新代码

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

example image

Answer 3

Bootstrap的样式会从bootstrap数据表的搜索输入中删除清除图标。这是Bootstrap默认行为的一部分。

将此添加到CSS：

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

它将覆盖Bootstrap隐藏的清除按钮。

Bootstrap数据表：搜索过滤器，清除图标问题

3 个答案: