I am currently using DataTable in my code. The sorting images in the header of the table are on the right side while the labels are on the left, as shown below: https://i.sstatic.net/Bz6EO.jpg
However, I would like to switch this arrangement and have the header labels on the right side. What steps should I take? Here is a snippet of my HTML table code:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>عکس</th>
<th>نام</th>
<th>نام خانوادگی</th>
<th>آدرس منزل</th>
<th>ویرایش</th>
<th>حذف</th>
</tr>
</thead>
</table>
And here is the JavaScript code snippet:
table = $('#example').DataTable({
select: {
style: 'multi',
},
"aaData": data,
aaSorting: [[2, 'asc']],
columns: [
{
"width": "3%",
data: null,
className: "center",
"orderable": false,
defaultContent: '<img class="img-responsive" src="" />'
},
{"width": "27%"},
{"width": "27%"},
{"width": "37%"},
{
data: null,
"width": "3%",
className: "center",
"orderable": false,
defaultContent: '<p data-placement="top" data-toggle="tooltip" title="Edit"><button id="EditStudent" class="btn btn-primary btn-xs" data-title="ویرایش" ><span class="glyphicon glyphicon-pencil"></span></button></p></td>'
},
{
data: null,
"width": "3%",
"orderable": false,
defaultContent: '<p data-placement="top" data-toggle="tooltip" title="Delete"><button id="DeleteStudent" class="btn btn-danger btn-xs" data-title="Delete" ><span class="glyphicon glyphicon-trash"></span></button></p>'
},
{
"visible": false,
"searchable": false
},
]
});