How to place sorting icons at the bottom of the header cells and horizontally aligned?
How to place sorting icons at the bottom of the header cells and horizontally aligned?
A_lex_1
Posts: 1Questions: 1Answers: 0
Hello
I have a table made with datatables 2.0.8, serverside processed by a PHP script; the results are paginated and each column (8 in total) is sortable.
The columns have fixed and different width, the text inside each header is centered horizontally, but due to the column width, some headers have the sorting icons overlapped with the text.
I noticed that, by default, datatables 2.0.8 places the sorting icons on the right side.
I need to place the sorting icons at the bottom of each cell and aligned horizontally. To do that, I put the following css code inside a custom css file named style_table.css (the table has id idMainTable):
#idMainTable thead th:after {
content: '';
display: inline-block;
width: 0;
height: 0;
border-left: 4px solid transparent; /* Create icon */
border-right: 4px solid transparent; /* Create icon */
border-top: 4px solid black; /* arrow up */
position: absolute; /* absolute position */
bottom: 5px; /* Distance from the bottom */
left: 50%; /* Center position */
transform: translateX(-50%); /* Center icon*/
}
#idMainTable thead thead th.sort-desc:after {
border-top: none; /* remove arrow up */
border-bottom: 4px solid black; /* add arrow down */
}
#idMainTable thead thead th.sort-asc:after {
border-top: 4px solid black; /* add arrow up */
border-bottom: none; /* remove arrow down */
}
below there are the links to the js and css libraries inside <head> and </head> in my page.
<head>
<title>TABLE</title>
<!-- jQuery Library -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Datatable CSS -->
<link href='https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.css' rel='stylesheet' type='text/css'>
<link href='https://cdn.datatables.net/select/2.0.2/css/select.dataTables.css' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/2.0.8/integration/font-awesome/dataTables.fontAwesome.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/inter-ui/3.13.1/inter.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/@tailwindcss/ui@0.3.1/dist/tailwind-ui.min.css'>
<!-- Datatable JS -->
<script src="https://cdn.datatables.net/2.0.8/js/dataTables.js"></script>
<script src="https://cdn.datatables.net/select/2.0.2/js/dataTables.select.js"></script>
<script src='https://cdn.datatables.net/responsive/3.0.2/js/dataTables.responsive.js'></script>
<!-- custom style -->
<link rel="stylesheet" href="./css/style_table.css">
</head>
The arrow up is displayed at the bottom of each header and centered, but also the default icons are displayed on the right; if I click on the bottom arrow up, the columns are sorted correctly, but the the dafult icons are still displayed, and the bottom arrow up doesn't change to arrow down.
How can I only display the bottom arrow (up and down) and hide the default icons ath the right?
Thaks to anybody can give me helpful hints and suggestions.
Answers
You'd need extra CSS statements to correctly display your own sort icons.
For example you should explicity handle the classes
dt-ordering-ascanddt-ordering-desc`. Which one of them is applied will define what icon to show.To hide the defaults, target the
span.dt-column-orderelements anddisplay: nonethem.It might be easier just to modify the default CSS to your needs: https://live.datatables.net/gafawoha/20/edit .
Allan