Issue
I am using DataTables
and instead of using images for the pagination buttons I decided to use icons. I used the Bootstrap Font awesome CDN which works perfectly fine but in a proxy server, for some reason, the file throws 404
but the DataTables
CDN loads properly. From the DataTables documentation I found that DataTables has its own font-awesome meaning embedded one which is as follows:
Here is the fiddle [JSFiddle][1]
cdn.datatables.net/plug-ins/1.10.15/integration/font-awesome/dataTables.fontAwesome.css
Bootstrap CDN has the fa-forward etc classes for the fonts but in the DataTables CDN I couldn't find any so how can I add the icons for the pagination.
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>'
}
}
})
Using DataTables
font awesome how can I add the classes in my Jquery?
Solution
Try with this code
Hope this will helps You.
Edit
Here you can use full_numbers
instead of input
else it will throw error like
Cannot read property 'fnInit' of undefined.
And in your given font-awesome library there is a no such fonts which you want to use. So use other instead.
$('#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>
In Your given 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;
}
Here you see that your cdn inherits the fontawesome
font family
So if you can't use direct fontawesome CDN
than download it locally and upload on your server it will helps you.
Answered By - Nirav Joshi
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.