Fixed width for the last column in DataTables

Here's the scenario:

I have a jQuery script that loads DataTables, and I know how to set the "aoColumns" : "sWidth" parameter to fix the width of a specific column, which is working fine.

However, my issue arises from having multiple tables with varying numbers of columns, where I need the LAST column to always be a fixed size regardless of its position (e.g. 3rd, 8th, 16th).

Is this even achievable?

I want to avoid calling the datatable jQuery for each table and refrain from making any structural modifications since it currently works well; perhaps there's a way to add a class or parameters through Javascript instead.

javascriptjquerycsshtml-table

Answer №1

Arranging your tables in this format is recommended:

<table class="tableClass">
    <colgroup>
    <col></col>
    <col></col>
    <col></col>
</colgroup>
<thead>
    <tr>
        <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Cell 1</td>
        <td>Cell 2</td>
            <td>Cell 3</td>
    </tr>
</tbody>    
</table>

By following this structure, you can easily manipulate your tables using jQuery like so:

$('.tableClass').each(function() {
    var self = this;
$(self).find('col:last').css('background-color', 'red'); 
});

This snippet of jQuery code targets the last column of each table with the specified class and allows you to customize it as needed. (In this case, changing the background-color for testing purposes.)

If your requirement is just adjusting the width, you might consider using $(self).find('th:last'), although utilizing <colgroup> and <col> elements provides a more standardized approach.

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

Implement jQuery to toggle a class on click for added functionality

I am attempting to create a box that changes color when clicked. When the box is first clicked, it will turn red by adding the class red, and if clicked again, it will change to blue. The colors alternate with each click, but I am unsure of how to achieve ...

javascriptjqueryhtmlcss

Making a RESTful API call using JavaScript

Can someone help me with making a call to a REST API using JavaScript, Ajax, or jQuery? curl -v -X PUT -H "Content-Type: application/json" -H "Accept: application/json" -X PUT --user user:password http://url -d "{\"name\": \"Marcus0.2\ ...

javascriptajaxapicurl

Unable to manipulate JQuery lightSlider slides using element index

I've been working on a new page design at this link: The code is still a work in progress, so bear with me as I test out some functions and scripts. At the end of the first section, there are 4 logos that, when clicked, will trigger a modal to pop u ...

javascripthtmljquerycssslider

Exploring the possibilities of using the typeof operator within an Event

I want to log some information if the input value is a number. However, I am facing an issue where it's not working and no bugs are appearing. Here is a snippet of code from CodePen (https://codepen.io/matoung/pen/KBNmPP) let button = document.que ...

javascript

The navigation bar is showing my logo in a blurry and small format when viewed on a desktop

Currently, Twitter Bootstrap is being utilized on my website and a high-resolution logo has been successfully uploaded. The dimensions of the logo are 529 x 100 pixels, and here is the relevant CSS: .navbar-brand { float: left; padding: 12px 15p ...

csstwitter-bootstrap

Ways to position a single item in the middle of a multi-column layout

I need help with aligning dynamic images in a 2-column layout. What's the best way to center a single image or collapse the columns when there's only one image? Currently, the single image is always placed in the left column. Is there a CSS-only ...

htmlcsscss-multicolumn-layout

Tips for updating parameters that are defined in a controller within a promise

Currently, I am developing a single page application using Angular and TypeScript. I am facing an issue with updating the parameter value (_isShowFirst) of the controller inside a promise function. It seems like nothing is recognized within the promise blo ...

javascriptangularjstypescriptangular-promise

When using jQuery each method, it may return an [object Object]

Having an issue with the html variable displaying [object Object] instead of actual elements. Any suggestions on what I should change? var html = ''; $.each(data.response, function(index, value) { var tr = $('<tr>'); var ...

javascriptjquerydomappendeach

Is there a way to retrieve the present value of a dropdown menu once an ajax call is successful?

Currently, I am facing an issue where I am unable to retrieve the selected value from a dropdown menu. The logged value is always the first option in the dropdown menu, even though I have set it to a different value. Can someone help me identify what I may ...

javascriptjqueryhtmlajax

Populate a table cell with data using a jQuery AJAX request

I am attempting to implement an ajax call for each of a series of 's and update the inner html of the td with processed data from the ajax call. Since I am restricted to using an ecommerce cms system, my ajax call is generating a complete page with t ...

jqueryajaxinnerhtml

Strategies for loading content lazily on JQuery tabs that is unrelated to the main tab content, such as login or registration sections

I am utilizing lazy loading to display 3 tabs in an ASP.NET MVC web application using Query tabs. However, I also have a Login section (username and password) that I want to be displayed in the tab content area when the user clicks on a link at the top o ...

c#asp.netjqueryasp.net-mvc

Ways to ensure a file upload is not mandatory when processing data using jQuery Ajax

Here is a form I have created: <form name ="order" id="order" action="" method="POST" role="form" enctype="multipart/form-data"> <input class="checkbox pull-left" type="checkbox" name="check_list[]" value="p1">&nbsp;Product 1 <i ...

jqueryajaxformsappendform-data

How can I make the input box TextField in Material UI with React expand to full width when selected?

I am currently customizing a Material UI form where the input box (Text Field) starts off at a width of 200px. My goal is to have the input box expand to 100% width only when it is selected or clicked on. ... <FormGroup sx={{ maxWidth: "200px" ...

javascriptreactjsformsmaterial-ui

Tracing the variable passed by Jquery (AJAX) within the PHP code on the server to identify and

My web-hosted server has a PHP file in a specific folder. I want to send data from an HTML form using Jquery AJAX and view those variables in the PHP code on the server side. Here is my Jquery AJAX code: function sendtoServer() { $.ajax({ ur ...

phpjqueryhtmlajax

Tips for resolving an issue with an array and the find method?

Seeking guidance on using the find method. Specifically, I am tasked with searching an array to find a specific string match. The catch is that this string may be nested within one of the objects in its child array. I attempted to create an if statement in ...

javascriptarrays

Show an error message in a popup window, following a validation error in Laravel

I am facing an issue with displaying error messages in the update modal form. I am using Laravel request for validation and AJAX to submit the form inside a modal. My goal is to show the error message for each field that is inputted incorrectly. However, i ...

javascriptphpajaxlaravelvalidation

The webpage appears fine on the local server, but displays incorrectly on IIS (Internet Explorer 11)

My project looks great when I run it locally on my computer and open the page in Internet Explorer 11: https://i.stack.imgur.com/yZvo2.png However, when I deploy the page to an IIS server and navigate to the page, it appears differently in Internet Explo ...

htmlcssasp.net-mvcinternet-explorer-11

Tips for positioning a JQuery drop-down correctly

Although I am not well-versed in JQuery and struggle with CSS, I often find myself working with both. Currently, I have encountered a problem: The jquery script I am using involves clicking on an image to reveal a login box that drops down using slideTogg ...

jqueryhtmlcss

The video player will only start playing after the source has been changed if it was already in play

I am facing an issue with my video player that has thumbnails. The problem is that the video player does not start playing the selected video unless the video is already playing. This means I have to hit the play button first, and then select the thumbnail ...

javascripthtmlhtml5-video

Utilizing a Mocking/Spying Tool in Angular Unit Testing

I have a file named myHelpers.ts which contains multiple functions: myHelpers.ts export function multiply(a, b) { return a * b; } export function add(a, b) { return a + b; } export function subtract(a, b) { return a - b; } The above file al ...

javascriptangularjasminekarma-jasminespyon