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

How can I resolve the "AngularJS 1.6.6 component controller not registered" error plaguing my application?

I am currently using AngularJS version 1.6.6 along with Gulp for my project. Here are the snippets of my code, particularly focusing on the AppLayout component: /// app-layout.component.js angular.module('app').component('appLayout&ap ...

javascriptangularjsangularjs-controlleras

Unable to retrieve the desired information from the jQuery AJAX request

Here is an example of a C# web method: [WebMethod] public string Greetings() { return "Greetings from the server"; } This is the jQuery AJAX code used to call the web method: $.ajax({ url: "http://10.0.2.2/SampleService/ ...

c#jqueryajaxweb-services

What is the best way to call a method within a TypeScript class using its name as a string while already inside the class itself?

Currently, I am developing a class that automates the creation of routes for Express and invokes a function in a controller. However, upon trying to execute this[methodName](req, res), I come across an error message stating: 'Element implicitly has an ...

javascripttypescriptexpressmodel-view-controllerlogic

Using asynchronous data in Angular 2 animations

Currently, I have developed a component that fetches a dataset of skills from my database. Each skill in the dataset contains a title and a percentage value. My objective is to set the initial width value of each div to 0% and then dynamically adjust it t ...

javascriptcssangulartypescriptasynchronous

Creating Eye-Catching Images by Incorporating Image Overlays Using Just One Image

I'm facing a bit of a challenge here. I need to figure out how to overlay an image onto another image using just a single image tag. Specifically, I want to add a resize icon to the bottom right corner of an image to let users know they can resize it ...

javascripthtmlcss

How can I incorporate percentage values into input text in Angular?

How can I include a percent sign in an input field using Angular, without relying on jQuery? I am looking for a solution that is identical to what I would achieve with jQuery. Here is the current status of my project: ...

javascriptangulartypescript

The callback function in Backbone fires before the ajaxSuccess event in jQuery is triggered

In my experience, I have noticed that jQuery's ajaxSuccess callback is not always called before Backbone's success. To ensure this sequence, I would like to modify the code as follows: someModel.fetch({ success: function() { console.log(' ...

jqueryajaxbackbone.jscallback

Building a listview using Angular, MySQL, and Node.js

As a newcomer to Angular, I've been navigating my way through the learning process with some success but also encountering challenges. Although I've managed to resolve certain issues within the application, such as successfully inserting data int ...

javascriptmysqlnode.jsangularjs

scrolling malfunction

I encountered a problem with the scroll feature in this image: The problem is that I only want the vertical scroll to show up, not the horizontal scroll. I tried using the overflow:scroll attribute in my code. Will it display the same in Firefox and IE, o ...

htmlcss

Internet Explorer's incompatibility with the window.location.href function

I'm having an issue with navigating to a new page using a callback from an AJAX post request specifically on Internet Explorer. Here is the code snippet causing the problem: $.ajax({ type: "POST", url: phpUrl, data: data, async: ...

javascriptjqueryajaxinternet-explorer

Exploring search filters using KnockoutJS

I'm currently working on incorporating a search filter into my web application. After reading some informative articles and exploring various Jsfiddles, I've attempted to enable searching by TypeName to display the corresponding row with that spe ...

javascriptnode.jsknockout.js

Transferring data between jQuery and other global JavaScript variables

I'm facing a challenge when trying to make functions I created in jQuery access JavaScript values defined elsewhere. For instance, I have a function set within my jQuery code. var parentImg = ''; //global variable. $(document).change(funct ...

javascriptjquery

Transfer certain options to another selection except for the one currently chosen in the first one

My task is to use jQuery to generate multiple select elements. Each new select should copy the options from the previous one, excluding any that have already been selected by the user. This process should occur every time an option is changed. Select opti ...

jqueryhtmlweb

Can anyone explain why I keep encountering an endless loop when using react hooks?

Having a bit of trouble with fetching data from a JS file that is mimicking an API with some endpoint methods. When I console log the data, everything seems fine, but for some reason, I keep running into an infinite loop when using hooks. I've tried t ...

javascriptreactjsreact-hooksinfinite-loop

Whenever the ajax oncomplete event is triggered, Primefaces overrides the functionality of jquery, leading to

I have implemented a plugin for fixed table columns in my Primefaces project. The plugin is somewhat functional, but I am facing some issues. primefaces v6.1 jQuery v1.7.1 It works under the following conditions; p:dataTable with <p:ajax event="page ...

javascriptjqueryajaxjsfprimefaces

Issue: Module 'curl' is not located at Function.Module._resolveFilename (module.js:489:15)

After installing node.js using the Windows installer, I noticed that the folder structure created was C:\Program Files\nodejs\node_modules\npm\node_modules. It seems like all the module folders are in the last node_modules director ...

javascriptjquerynode.jsnpm

Ensure that you do not proceed with the next step until the promise has been fulfilled

I am currently faced with a challenge in my project where I have a service that wraps a 3rd-party API to retrieve data into my controller. However, I need to perform some data processing to pivot the information before displaying it, but I am struggling to ...

javascriptangularjspromise

React NextJS: Unable to retrieve cookies or properties post redirection

Within my nextJS application, when a user logs in on the login page, a cookie is created with a token and then they are redirected to the main page which utilizes the main component. However, within the Main component, I am encountering an issue where the ...

javascriptreactjscookiesnext.js

obtain data from JSON using JavaScript

Greetings! I am dealing with a JSON output that looks like this: "{ \"max_output_watts\": 150, \"frame_length_inches\": \"62.20\", \"frame_width_inches\": \"31.81\" }" I am using it in a functi ...

javascriptjson

JavaScript - Dynamically loaded CSS: CSS variables are not immediately accessible to JavaScript, but are successfully evaluated within the CSS itself

I am encountering an issue with dynamically loading stylesheets via JavaScript into my application. Within these stylesheets, I have various CSS variables that I need to access and modify from my JavaScript code. When the stylesheets are directly embedded ...

javascripthtmlcsscss-variables