Place the sorting image on the left side of the DataTable header

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
        },

    ]
});

Answer №1

Here is the css code to align text to the right in a table header:

table.dataTable thead .sorting {
    text-align: right;
}

table.dataTable thead .sorting_asc {
    text-align: right;
}

table.dataTable thead .sorting_desc{
    text-align: right;
}

Answer №2

give this a shot

table.dataTable thead .sorting::after {
    bottom: 10px !important;
    left: 0 !important; 
    right: 5px !important;
}

you'll find this useful, thank you

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to create a unique shadow effect for a container in Flutter?

I am facing a challenge with my screen layout that uses GridView.builder with crossAxisCount: 3. In the itemBuilder, I am returning a Container with shadows on the left, right, and bottom, but so far, I have not been able to achieve the desired outcome. H ...

Retrieving the selected date from JqueryUI Datepicker after form submission

I am currently using an inline datepicker that fills in an input textbox. $("#left-calendar").datepicker({ altField: "#left-date-text" }); The left-date-text is located within a form, and upon submission with a submit button, it sends the data to a p ...

Older versions of Internet Explorer, specifically IE9 and below, do not send the request body when making AJAX calls to a

I've exhausted all my options from Google trying to get this to work, but so far no luck. The issue I'm facing is making an HTTP request to a server on a different domain. It works perfectly fine on all browsers, including IE10. However, on IE ...

What is the best way to handle JSON data in JQuery when it is returned with a header type of "text/html"?

I'm attempting to utilize the jquery getJSON method in order to retrieve JSON data from a public API. However, I am consistently encountering errors when the callback of my getJSON request is executed. Warning: Resource interpreted as Script but trans ...

Tips for implementing a linear gradient on a bar graph using Highcharts

I'm trying to create a bar chart using highcharts, and I want to apply a linear gradient for the bar fill color. However, I am not sure how to set this up. Can anyone provide some guidance or ideas? Here is an example of what I'm hoping to achie ...

Setting the default date for an inline datepicker in jQuery UI

Utilizing jQuery UI for an inline datepicker has been quite beneficial. When applying it to a <div>, a sleek inline datepicker is generated effortlessly, though configuring the default date selection remains unclear. JS: $("div.date").datepicker({} ...

Convert Binary Data to PDF Using Javascript Through Streaming

Upon requesting a Web-service, I received the following response (PDF file Streamed) %PDF-1.5 %µµµµ 1 0 obj <</Type/Catalog/Pages 2 0 R/Lang(en-GB) /StructTreeRoot 10 0 R/MarkInfo<</Marked true>>>> endobj 2 0 obj <</Type/ ...

Brainstorm: Creative ways to showcase excess content within a div

I'm struggling to find a suitable title for this issue. Essentially, I have a box-shaped div that expands into a rectangle and reveals content when clicked. The problem arises when I animate the div's width during expansion. Instead of positioni ...

Using jQuery .post to fetch PHP include not working

My website is constructed using PHP include files that act as templates. Any changes made to one file affect the entire website. When I select a radio button, AJAX should trigger and attempt to communicate with another PHP file responsible for connecting ...

What is the best way to add content to a box once it has been hovered over?

Looking to create a sticky note-style design, but struggling with displaying the content inside the box only when hovered. In my code example below, can you help me achieve this effect? body { margin: 45px; } .box { display:inline-block; backgrou ...

What is the reason behind Gmail altering the id attributes of certain elements?

Here we have a snippet from Gmail, showcasing the "Compose" button. Note the id, it starts as ":il" when there are no unread messages. <div id=":il" class="aic"> <div class="z0"> <div class="T-I J-J5-Ji T-I-KE L3" tabindex="0" role="button" ...

Creating a visible block in ReactJS: Step-by-step guide

Hello and thank you for all the hard work you do on this platform. I am relatively new to working with ReactJS and have been encountering some difficulties trying to integrate it with sandbox environments like JSFiddle. I have a div element named "app-con ...

Bringing Vue Components Together in Laravel: A Guide to Component Importation

Recently, I started learning Vue.js and I am looking to understand how to use component. Unfortunately, when I attempted to import my component into another component, it didn't work as expected. The framework I am currently using is Laravel 5.8 and I ...

Restoring list item to standard CSS styling

I am having trouble with the alignment of my links. They are currently displayed in a horizontal manner instead of vertically like this: First link Second link Third link The current layout shows the links next to each other as follows: Firs ...

Eliminating an SVG component from the webpage with the help of jQuery

Utilizing jQuery to insert an element into an embedded SVG can be achieved with the following code: var rect = SVG('rect'); $(rect).attr( { x: left, y: top, width: right - lef ...

"Encountering a Challenge with Setting Up Forms on

I've recently started learning to code and I'm facing an issue with my form appearing stretched out. You can view it here: I initially thought it was due to margins, so I increased them. Then, I tried adjusting the width to 50%, but that didn&ap ...

Dynamically change the fill color of an SVG using styled-components

I've been attempting to target the fill property of my SVG using CSS in styled-components without any luck. Here is my SVG: <svg width="65" height="19" viewBox="0 0 65 19" fill="none" xmlns="http://www. ...

Rotating Effects with jQuery and CSS

I am on the lookout for a jQuery Plugin or a method to achieve this specific animation using CSS transforms. https://i.sstatic.net/L2hjD.png Despite my efforts with Google, all I came across was the typical flip animation. However, I am looking for one t ...

Troubleshooting: Difficulty parsing data due to missing special characters

https://i.stack.imgur.com/SWOgr.png When attempting to access a table similar to the one shown above through ajax, I am encountering an issue where certain characters (such as ' and ") are not displaying. Why is this happening? Below is the code sni ...

What is the most efficient method for applying multiple classNames to elements in Next.js?

Could you provide me with a list of all methods, both with and without packages? Also, I'm interested in knowing why one method is considered better than the others. ...