DataTables dataTables_filter class 在 FF 中不可见

Question

dataTables 的搜索功能在Chrome 中运行良好，但在 FireFox 中输入的字符是不可见的。 FireFox 中的控制台检查器还显示：ReferenceError: table is not defined 这很重要吗？

<div id="cccr_filter" class="dataTables_filter">
    <label>Search:<input type="search" class="" placeholder="" aria-controls="cccr"></label>
</div>

Answer 1

您在 screen.css:190 中定义了非常大的填充，当与 foundation.css:2741 中的 box-sizing: border-box; 组合时，它会使文本消失。添加以下 CSS 规则：

.dataTables_wrapper .dataTables_filter input[type="search"]{
  padding:0 0.5em; 
}

关于JavaScript错误，需要设置"responsive": true，如下图：

  $('#cccr').DataTable({
    "columnDefs": [
       { "width": "50%", "Date": 0 }
    ],
    "order": [
        [0, "desc"],
        [2, "asc"],
        [1, "asc"]
    ],
    "aaSorting": [],
    "bPaginate": false,
    "bLengthChange": true,
    "bFilter": true,
    "bSort": true,
    "bInfo": true,
    "sPaginationType": "full_numbers",
    "sScrollY": "25rem",
    "bStateSave": false,
    "responsive": true,
    "bAutoWidth":false,
    "autoWidth": true
});

您可以删除这些行：

var oTable = $('#cccr').dataTable(); 
oTable.fnFilter('');
new $.fn.dataTable.Responsive(table);

DataTables dataTables_filter class 在 FF 中不可见

DataTables dataTables_filter class not visible in FF

javascript

datatables