Question

我正在使用DataTables而不是使用图像作为分页按钮我决定使用图标。我使用了Bootstrap http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css Font awesome CDN，但是在代理服务器中，由于某种原因，文件会抛出404，但DataTables CDN正常加载。 DataTables文档我发现DataTables有自己的font-awesome意义，嵌入式如下：

这是小提琴[JSFiddle] [1]

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

Bootstrap CDN有字体的前向等级类，但在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'。

在你给定的font-awesome库中，你想要使用没有这样的字体。所以请改用其他。

$('#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';
}

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

2 个答案: