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

vhipe2zx 于 12个月前发布在 jQuery

关注(0)|答案(2)|浏览(142)

我使用的是DataTables，而不是使用图片的分页按钮，我决定使用图标。我使用的Bootstrap Font awesome CDN工作得很好，但在代理服务器中，由于某种原因，文件抛出404，但DataTables CDN加载正确。从DataTables文档，我发现DataTables有自己的字体，真棒的含义嵌入式之一，如下：
[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中添加类？

jquery

来源：https://stackoverflow.com/questions/44982621/how-to-use-datatables-font-awesome-icons

2条答案

按热度按时间

gcuhipw91#

尝试使用此代码
希望这对你有帮助。

编辑

在这里，您可以使用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
});

个字符
在您指定的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，那么在本地下载并上传到你的服务器上会对你有帮助。

赞(0）回复(0）举报 12个月前

wqsoz72f2#

对于那些来这里寻找排序图标的人，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';
}

字符串

赞(0）回复(0）举报 12个月前

我来回答

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

2条答案

相关问题

热门标签

最新问答