DataTables dataTables_filter类在FF中不可见

Question

http://communitychessclub.com/games.php

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中定义了非常大的填充，并且当box-sizing: border-box;中与foundation.css:2741结合使用时，文本会消失。添加以下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);