Center the first column in jQuery Datatables

Looking to center-align only the first column named "Status":

        $("#TransactionTable").DataTable({
            ajax: {
                url: '/Transaction/SearchMockup',
                type: 'POST',
                data: {
                    cardEndingWith: $("#ccn").val(),
                    status: $("#status").val(),
                    supplier: $("#supplier").val(),
                    fromDate: $("#fromDate").val(),
                    toDate: $("#toDate").val()
                }
            },
            columns: [
            {
                data: 'Status', render: function (data, type, row) {
                    switch (data) {
                        case 1:
                            return '<div id="circleRed"></div>'
                            break;
                        case 2:
                            return '<div id="circleGreen"></div>'
                            break;
                        case 3:
                            return '<div id="circleOrange"></div>'
                            break;
                    }
                }
            },
            { data: 'TransactionId' },
            { data: 'CreditCardNumber' },
            { data: 'Supplier' },
            { data: 'CreatedAt' },
            { data: 'Amount' }
            ]
        });

What is needed to include in the columns option to achieve this? I have reviewed Datatables documentation and also searched on Google.

Answer №1

Utilize the theme classes provided by bootstrap or create your own in the columndef.

For example, you can use text-right, text-left, text-center

'columnDefs': [
    {
        "targets": 0, // specify first column
        "className": "text-center",
        "width": "4%"
   },
   {
        "targets": 2,
        "className": "text-right",
   }
 ]

Answer №2

Furthermore, you have the option to cluster the columns together in order to implement a single style across multiple columns in this manner:

  columnDefs: [
    { className: 'text-right', targets: [7, 10, 11, 14, 16] },
    { className: 'text-center', targets: [5] },
  ], ...

Answer №3

To customize the appearance, you can manually apply styling.

$("customize_your_table").DataTable({
    ....
    columns: [
        {
            mData: "customize_property_from_json",
            render: function (data) {
                return '<span style="display: flex; flex-flow: row nowrap; justify-content: center;">data</span>';
            }
        },
    ],
    ....
});

Answer №4

Another option is to define a single css class name within each column object.

For example:

{
    data: 'Status', 
    render: function (data, type, row) {
        switch (data) {
            case 1:
                 return '<div id="circleRed"></div>';
            case 2:
                 return '<div id="circleGreen"></div>';
            case 3:
                 return '<div id="circleOrange"></div>';
        }
    },
    className: "text-center"
}

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

Techniques for incorporating a variable into the value field in JavaScript

let y = data[1]; cell1.innerHTML ='<input id="text" type="text" value= "'y'"/>' ; This snippet of code does not render any content when attempting to pass the variable, but if you provide a specific value like "h", it will displa ...

Is it advisable to include cursor:pointer in the pseudo class :hover?

Which option is better to use? .myclass { cursor: pointer; } or .myclass:hover { cursor: pointer; } Is there a notable difference between the two? ...

What is the best way to send information from a main blade to an included modal?

Trying to implement a functionality where a modal is triggered on clicking a button and an array named $incident is passed through to the properties of a Vue component. What is the correct way to pass data from a parent blade to an included modal? I initia ...

Having trouble retrieving JSON data using ajax

I am currently working with JSON data that is being generated by my PHP code. Here is an example of how the data looks: {"Inboxunreadmessage":4, "aaData":[{ "Inboxsubject":"Email SMTP Test", "Inboxfrom":"Deepak Saini <*****@*****.co.in>"} ...

What is the best way to horizontally center an image with a transparent background using CSS?

A search button triggers a processing gif image to appear in the center with a transparent background. The content of this function is described below. Thank you for all responses. .img-loader{ text-align: center; width: 50px; display: block; ma ...

Tips for displaying an image using the image tag in jQuery

I am looking to dynamically append a share button image after every image tag that meets certain criteria. For the code snippet and demonstration, you can visit this fiddler link here. $(document).ready(function() { $("img").each(function() ...

How can I troubleshoot an image not appearing in Bootstrap within a Laravel Blade file while using PHPStorm?

Forgive me if this sounds like a silly question: I attempted to use the following src attribute in an img tag to show an image on a website created with Bootstrap, while using phpstorm with a laravel blade file: src="C:\Users\MAHE\Pictures&b ...

Extracting data from websites and importing it into Excel with VBA

I am venturing into the world of web scraping for the first time using VBA. My goal is to extract pricing information from our company's distributors and save it in an Excel file for our sales team to analyze. The process involves taking the URL from ...

The problem of JSON data being displayed instead of redirecting is persistent

Here's a unique AJAX Login solution that I developed. $(function() { $('#loginform').submit(function(){ var uname = $('#username').val(); var password = $('#password').val(); $("#loading").show(); ...

Exploring the depths of HTML 5, harnessing the power of

As I embark on a new website project, I am excited to incorporate HTML5 for a fresh and dynamic look. To address potential compatibility issues with Internet Explorer, I have decided to utilize the resources provided by the HTML5 Boilerplate project. In m ...

How to stop event propagation from a draggable element nested within a sortable container in jQuery UI

Here is a link to the code snippet: http://jsfiddle.net/Aa7TW/ {greedy: true} The issue arises with the interaction between droppable and sortable elements. Sortable is triggered when an item is dropped directly onto it, while dropping an item from the ...

What is the best way to add indentation to HTML code in a code tag?

Looking to insert some Python code into an HTML document using the code tag. Here is an example: <code> for iris, species in zip(irises, classification): if species == 0: print(f'Flower {iris} is Iris-setosa') </ ...

The iPhone header position switches when an HTML5 input type number is selected

I am currently working on a project that involves jQuery Mobile and PhoneGap. One issue I am encountering is when using the iPhone version, the header position changes when I click on an input type number. NOTE: When I focus on the input type number in my ...

Creating a website without access to the internet

When I'm working on my laptop in locations without internet access, I need to build a website. How can I assess the progress of my pages without an active browser? ...

The error message for validating my form magically disappears

I've been working on creating a registration form using HTML, Bootstrap, and JavaScript. My goal was to display an error message when a field is left empty, but for some reason, the error message appears briefly and disappears afterwards. I can't ...

Is there a problem with the layout or indexing?

My website features a div that animates in using a jQuery click function, appearing over other divs that have animated in on $(document).ready(). Strangely, this div shows up behind the others only on the home page of my website and not on any other pages, ...

Spinning an SVG path with CSS3 in a circular motion from its central axis

I have a collection of SVG paths, and one of them is displayed below: <path id="GOL" class="st0" d="M37.5,430.5l-12.4-12.4v-13.3h-4.2c-7.2,0-13.9,2.5-18.7,7.5c-4.7,4.9-7.3,11.3-7.3,18.3 c0,7,2.6,13.5,7.3,18.3c4.8,5,11.4,7.6,18.6,7.6l4.2,0v-13.7L36. ...

How can I utilize a PHP variable as the height and width parameters in a CSS style?

After spending a considerable amount of time on this project, I am still struggling to make it work. Can someone please guide me on how to correctly assign the width and height values to the img element using variables? for ($x = 1; $x <= $aantal; $x+ ...

Unable to load AngularJS thumbnails from JSON file? Learn how to showcase a larger image by clicking on the thumbnail

Working with AngularJS to retrieve image data from a JSON file has been successful for me. My next task involves loading all of the thumbnail images into the gallery div and populating the src, alt, and title attributes using ng-repeat. However, this part ...

The slider thumb is not showing up properly on Microsoft Edge

Hey there! I'm experiencing an issue with the range slider's thumb display in Microsoft Edge. It appears to be positioned inside the track rather than outside as intended. Take a look at this snapshot for clarification: https://i.stack.imgur.co ...