CODEWITHSUNDEEP
jquerydatatables
C.Ramp
C.Ramp

Reputation: 268

Datatables fixed column not aligned

I'm making a Datatables page and I fixed the last column with FixedColumns.

However, this column is not aligned with the other lines.

enter image description here

This is my code to create the Datatables:

var table = $('#mytable').DataTable({
    ajax: {
        type: "POST",
        "url": 'my url',
        "dataSrc": "",
    },
    "createdRow": function(row, data, dataIndex) {
        if (data['main'] === "1") {
            $(row).addClass('maincontact');
        } else {
            $(row).addClass('secondcontact');
        }
    },
    "processing": true,
    "paging": true,
    "scrollY": true, 
    "scrollX": true,
    "deferRender": true,
    fixedColumns: {
        leftColumns: 0,
        rightColumns: 1
    },
    "order": [
        [4, "asc"]
    ],
    "autoWidth": true,
    select: {
        style: 'os',
        items: 'cell'
    },
    dom: 'Blfrtip',
    buttons: [{
        extend: 'csv',
        text: 'csv'
        },
        bom: true
    }],
    columnDefs: [{
        targets: tablesize, // tablesize = the last column
        data: null,
        render: function(data, type, row, meta) {
            if (data['main'] === "1") {
                return '<button type="button" class="btn btn-primary btn-update" >Update</button>';
            } else {
                return '<button type="button" class="btn btn-primary btn-update d-none" >Update</button>';
            }
        }
    }]
});
return table;

I already search on Datatables documentation and forum. I also search in StackOverflow but all the threads are about the fixedHeaders, but i don't have this option.

If someone has an idea, i take it.

Upvotes: 4

Views: 4344

Answers (3)

Esteban Lopez Ramirez
Esteban Lopez Ramirez

Reputation: 76

I was having the same problem but it was solved when I added the css cdn for fixedColumns

<!-- cdn for fixedColumns in datatables -->    
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.bootstrap.min.css">

Try it out, I hope that it works for others.

Upvotes: 5

C.Ramp
C.Ramp

Reputation: 268

I found a solution. That's quite ugly but it does the job.

So I work with the css file.

.DTFC_RightBodyLiner {
top: -13px !important;
overflow-x: hidden;
}

I just add these lines. To explain, I override the CSS properties of the div with the class DTFC_RightBodyLiner. I changed "top" for a negative value and !important to move up the div and clear the misalignement. To hide the scrollbar, I added "overflow-x: hidden".

I hope this answer can help other people. If you have better ideas, I will be pleased to read it.

Upvotes: 1

CamiEQ
CamiEQ

Reputation: 771

Fixed columns are really tricky. Things that have worked for me in this situation are:

  1. initializing fixed columns after the table's init. Say you delete the fixedColumns key from options in your code, and after returning table, you add this: new $.fn.dataTable.FixedColumns(table, { rightColumns: 1 });

  2. calling table.fixedColumns().relayout(); every time the dimensions of your datatable change. This could be after your ajax call or in its drawCallback option. I also call this method later on $(window).on('resize') and $(table).on('length.dt') events.

You could try one of these, or both. Good luck!

Upvotes: 0

Related Questions