Content is not aligned properly

Inês Borges

My edit column is not aligned properly. It is not aligned to the rightmost part of the table. It ruins the layout.
How can I make it aligned.

        $(document).ready(function () {
            $("#users-table").DataTable({

                "ajax": {
                    "url": '@Url.Action("GetList", "Users")',
                    "type": "GET",
                    "datatype": "json"
                },

                "columns": [
                    { "data": "ID" },
                    { "data": "PERFIL" },
                    { "data": "USERCD" },
                    { "data": "USERNM" },
                    { "data": "USERNIF" },
                    { "data": "ABREVIATURA" },
                    { "data": "COREACTIVO" },
                    { "data": "USERML" },
                    { "data": "PERFILWEB" },
                    {
                        "render": function (data, type, row) {
                            let toggleIcon = row.COREACTIVO === "S" ? "" : "";
                            return " | '" + toggleIcon + "";
                        }
                    }
                ],

                "aoSearchCols": [ // Filters table in first load to show only active
                    null,
                    null,
                    null,
                    null,
                    null,
                    null,
                    { "sSearch": "S" } // Index 6
                ],

                language: {
                    search: "Procurar: ",
                    processing: "A carregar",
                    lengthMenu: "Mostrar _MENU_ registos",
                    info: "A mostrar de _START_ a _END_ registos de _TOTAL_ registos",
                    infoFiltered: "(filtrados _MAX_ registos de total)",
                    infoEmpty: "A mostrar 0 a 0 registos de 0 registos",
                    loadingRecords: "A carregar registos...",
                    zeroRecords: "Nenhum registo para mostrar",
                    emptyTable: "Tabela vazia",
                    paginate: {
                        first: "Primeiro",
                        previous: "Anterior",
                        next: "Próximo",
                        last: "Último"
                    },
                    aria: {
                        sortAscending: ": Ordenar por ordem crescente",
                        sortDescending: ": Ordenar por ordem decrescente"
                    }
                },
                pageLength: 25,
                "pagingType": "simple_numbers",
                "scrollX": true,
                "scrollCollapse": true,
                "fixedHeader": true,
                fixedColumns: {
                    leftColumns: 0,
                    rightColumns: 1
                },
                dom: "<'row'<'col-sm-6'B><'col-sm-6'f>>"+'rtip',
                buttons: [
                    {
                        "extend": 'colvis',
                        "text": '',
                        "columns": ':not(.permanent)',
                        className: "colvis"
                    },
                    {
                        text: '',
                        extend: "pageLength",
                        className: "show-entries"
                    },
                    {
                        text: '',
                        extend: 'collection',
                        className: "filter-active-inactibe-btn",
                        buttons: [
                            {
                                text: "Ativo",
                                name: "filter-active-btn",
                                action: function (e, dt, node, config) {
                                    $("#users-table").DataTable().columns(6).search('S').draw();
                                    this.active(true);
                                    $("#users-table").DataTable().button('2-1').active(false);
                                    $("#users-table").DataTable().button('2-2').active(false);
                                }
                            },
                            {
                                text: "Todos",
                                name: "filter-all-btn",
                                action: function (e, dt, node, config) {
                                    $("#users-table").DataTable().columns(6).search("").draw();
                                    this.active(true);
                                    $("#users-table").DataTable().button('2-0').active(false);
                                    $("#users-table").DataTable().button('2-2').active(false);
                                }
                            },
                            {
                                text: "Inativo",
                                name: "filter-inactive-btn",
                                action: function (e, dt, node, config) {
                                    $("#users-table").DataTable().columns(6).search('N').draw();
                                    this.active(true);
                                    $("#users-table").DataTable().button('2-0').active(false);
                                    $("#users-table").DataTable().button('2-1').active(false);
                                }
                            }
                        ]

                    }



                ],

                // Changes the color of the letter to red if the letter is N for COREACTIVO
                "createdRow": function (row, data, index) {
                    if (data.COREACTIVO === "N") {
                        row.style.backgroundColor = "#ff000055";
                    }
                },

                // Defines the visibility of the column ID
                "columnDefs": [
                    {
                        "targets": [0,6],
                        "visible": false,
                        "searchable": true
                    },
                    {
                        "targets": [9],
                        "className": "text-center",
                        "width": "50px"
                    },
                    {
                        "targets": [0,1,2,3,4,5,6,7,8],
                        "width": "20%"
                    }
                ]

            });

            $("#users-table").DataTable().buttons('2-0').active(true);
        });
    

kthorngren

Column misalignment problems are generally due to not having the correct Datatables JS and CSS files, the table is hidden when initialized and when shown the column widths aren't recalculated or using FixedHeader and FixedColumns together. Previous versions were incompatible. Make suer you are using the latest version of each since you are using both.

If this doesn't help we will need to see the page to debug the styling issues. Please post a link to your page or a test case replicating the issue so we can take a look.
https://datatables.net/manual/tech-notes/10

Kevin

Inês Borges

I have these scripts and these links:

<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script> <script src="//cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script> <script src="//cdn.datatables.net/plug-ins/1.10.12/sorting/datetime-moment.js"></script> <script src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.colVis.min.js"></script> <script src="https://cdn.datatables.net/fixedcolumns/3.3.2/js/dataTables.fixedColumns.min.js"></script> <script src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>

<link href="//cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" rel="stylesheet" /> <link href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.dataTables.min.css" rel="stylesheet" /> <link href="https://cdn.datatables.net/fixedcolumns/3.3.1/css/fixedColumns.bootstrap.min.css" rel="stylesheet"/> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

kthorngren

FixedColumns is at 4.0.1. You have FixedHeader enabled but I don't see the library being loaded. You can try a later version of FixedColumns. Use the Download Builder. For more suggestions please post a link to a test case showing the issue.

Kevin

Inês Borges

I've added everything in the download builder and it became even worse.

The row should be red as this piece of code states:
// Changes the color of the letter to red if the letter is N for COREACTIVO "createdRow": function (row, data, index) { if (data.COREACTIVO === "N") { row.style.backgroundColor = "#ff000055"; } }

How can I make the row red?

Inês Borges

And it throws me this warning:

DataTables warning: table id=users-table - Requested unknown parameter '9' for row 1, column 9. For more information about this error, please see http://datatables.net/tn/4

Inês Borges

I've figured it out. CSS specificity was causing the row not to be red. But I can't get rid of the warning.

kthorngren

But I can't get rid of the warning.

Did you follow the troubleshooting steps at the link provided?
http://datatables.net/tn/4

Kevin

Inês Borges

Well, I don't have any rowspan or colspan in my tbody.
I don't know how to calculate the number of cells.
I have specified the exact number of columns that are in the table, which is 10.
My column.render returns something.
How can I check the server error logs?

Inês Borges

Solved the problem by adding these two lines of code in columnDefs:

{
     "defaultContent": "",
     "targets": "_all"
},

Inês Borges

Hope this helps someone else

kthorngren

The problem might be that you need to add the following to the last column:

                    {
                        data: null,
                        defaultContent: "",
                        "render": function (data, type, row) {
                            let toggleIcon = row.COREACTIVO === "S" ? "<i></i>" : "<i></i>";
                            return "<a rel="nofollow" href="./UpdateUserlogin?" + "id=" + row.ID + ""><i></i></a> | <a>'" + toggleIcon + "</a>";
                        }
                    }

Requested unknown parameter '9' for row 1

Adding columns.data as null and columns.defaultContent as "" should allow the data to be populated without specifying an object for this column.

Kevin