Complex column widths with Jquery Datatables

Question

I have created a datatable with the following code

$(document).ready( function () {
    $('#data-table').DataTable( {
        "bFilter": false,
        "scrollY": 300,
        "scrollX": true,
        "paging":   false,
        "ordering": false,
        "info":     false,
        "columnDefs": [
        { "width": "20%", "targets": 0 }
    ]

    });
} );

Note that I have the widths set to 20% for each of the columns. My question is how do I specify a width for column 1 while still being able to set a width for the rest of the columns?

I've seen examples like this on the datatable website:

$('#example').dataTable( {
  "columns": [
    { "width": "20%" },
    null,
    null,
    null,
    null
  ]
} );

But I do not think this will work for me because it looks as if it would require me to know how many columns my table has in advance, and user requirements require the number of columns to be variable.

Setting width with columnDefs sets it for the first column only (targets: 0), not each of the columns. — Gyrocode.com
– Gyrocode.com, Commented Sep 25, 2015 at 22:04

Sir Cumference · Accepted Answer · 2015-09-25 22:24:25Z

2

Try replacing your columnDefs part with this (and adding the appropriate percentages):

"columnDefs": [
        { "width": "(percentage)%", "targets": "_all" }
        { "width": "(other percentage)%", "targets": 0 }
]

This will set the first column to one width and the others to a different width.

Targets define which column will be affected. Setting it as an integer will affect the columns starting from left to right (i.e. '"targets": [0, 1]' would affect the leftmost and second-leftmost columns). Negative integers affect the columns from right to left. The string "_all" will affect all columns.

edited Sep 25, 2015 at 22:24

answered Sep 25, 2015 at 22:18

Sir Cumference

2145 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Complex column widths with Jquery Datatables

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related