如何使用 DataTables 字体真棒图标？

Question

我使用DataTables，而不是使用图像作为分页按钮，我决定使用图标。我使用了Bootstrap Font awesome CDN，它工作得非常好，但在代理服务器中，由于某种原因，文件抛出404，但DataTables CDN 加载正常。从 DataTables 文档中，我发现 DataTables 有自己的字体-真棒意思是嵌入的，如下所示：

这是小提琴 [JSFiddle][1]

cdn.datatables.net/plug-ins/1.10.15/integration/font-awesome/dataTables.fontAwesome.css

Bootstrap CDN 具有字体的 fa-forward 等类，但在 DataTables CDN 中我找不到任何内容，所以如何添加分页图标。

jQuery

var table = $('#example').DataTable({
 pagingType: 'input',
 pageLength: 5,
 language: {
 oPaginate: {
   sNext: '<i class="fa fa-forward"></i>',
   sPrevious: '<i class="fa fa-backward"></i>',
   sFirst: '<i class="fa fa-step-backward"></i>',
   sLast: '<i class="fa fa-step-forward"></i>'
   }
   }   
  })  

使用DataTables 字体真棒我如何在我的Jquery 中添加类？

Answer 1

试试这段代码

希望对你有帮助。

编辑

在这里你可以使用full_numbers 而不是input 否则会抛出类似的错误

无法读取未定义的属性“fnInit”。

并且在您给定的字体真棒库中，没有您想要使用的此类字体。所以改用其他吧。

$('#example').DataTable({
    
     language: {
      oPaginate: {
          sNext: '<i class="fa fa-forward"></i>',
          sPrevious: '<i class="fa fa-backward"></i>',
          sFirst: '<i class="fa fa-step-backward"></i>',
          sLast: '<i class="fa fa-step-forward"></i>' 
      }
      
   } ,
   pagingType: 'full_numbers',
   pageLength: 5
});

<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<table id="example">
<thead>
        <tr>
            <th>Subscriber ID</th>
            <th>Install Location</th>
            <th>Subscriber Name</th>
            <th>some data</th>
        </tr>
    </thead>
</table>

在您给定的 CDN 中

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    position: absolute;
    top: 12px;
    right: 8px;
    display: block;
    font-family: FontAwesome;
}

在这里你看到你的 cdn 继承了fontawesome 字体系列

因此，如果您不能直接使用fontawesome CDN，而不是在本地下载并上传到您的服务器上，它将对您有所帮助。

Answer 2

对于来这里排序图标的人，DataTables 实际上有一篇关于此的旧博客文章：https://datatables.net/blog/2014-06-06

基本上，您可以在自己的 CSS 中覆盖来自 datatables.css 的规则，如下所示：

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
  font-family: FontAwesome;
}
table.dataTable thead .sorting:after {
  content: '\f0dc';
}
table.dataTable thead .sorting_asc:after {
  content: '\e155';
}
table.dataTable thead .sorting_desc:after {
  content: '\e156';
}