Question about Datatable behaviour

Pliachas Paschalis · January 2023

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: how can i set the columns width to auto?

here is my code

<!doctype html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />

    <title>Αφοι Βασιλειάδη - Δ. Κουσίδη Ο.Ε.</title>
    <link rel="icon" href="images/logo_b.ico">

    <link rel="stylesheet" type="text/css"
        href="https://cdn.datatables.net/v/bs4-4.6.0/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.11.3/af-2.3.7/b-2.0.1/b-html5-2.0.1/b-print-2.0.1/date-1.1.1/kt-2.6.4/r-2.2.9/sb-1.3.0/sp-1.4.0/sl-1.3.3/datatables.min.css">

    <link rel="stylesheet" type="text/css" href="css/generator-base.css">
    <link rel="stylesheet" type="text/css" href="css/editor.bootstrap4.min.css">
    <link href="styles2.css" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
    <script type="text/javascript" charset="utf-8"
        src="https://cdn.datatables.net/v/bs4-4.6.0/jqc-1.12.4/moment-2.18.1/jszip-2.5.0/pdfmake-0.1.36/dt-1.11.3/af-2.3.7/b-2.0.1/b-html5-2.0.1/b-print-2.0.1/date-1.1.1/kt-2.6.4/r-2.2.9/sb-1.3.0/sp-1.4.0/sl-1.3.3/datatables.min.js">
    </script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/editor.bootstrap4.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/table.Orders.js"></script>
    <script src="js/jquery.mask.min.js"></script>
    <script src="js/moment.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js" type="text/javascript">
    </script>

<style>
    div.container {
        width: 80%;
    }
</style>

</head>

<body style="background-color: white;">
    <!-- -->
    <div id="wrapper">
        <div class="overlay"></div>

        <!-- Sidebar -->
        <nav class="navbar navbar-inverse fixed-top" id="sidebar-wrapper" role="navigation">
            <ul class="nav sidebar-nav">
                <div class="sidebar-header">
                    <div class="sidebar-brand">
                        <a href="#">Αφοι Βασιλειάδη - Δ. Κουσίδη Ο.Ε.</a>
                    </div>
                </div>

                <li>
                    <a href="*">Ανανέωση Δεδομένων</a>
                </li>
                <li>
                    <a href="*">Πελάτες</a>
                </li>
                <li>
                    <a href="*">Έξοδος</a>
                </li>

                <li>
                    <a data-toggle="modal" href="#myInfo">Info</a>
                </li>
            </ul>
        </nav>
        <!-- /#sidebar-wrapper -->

        <!-- Page Content -->
        <div id="page-content-wrapper">
            <button type="button" class="hamburger animated fadeInLeft is-closed" data-toggle="offcanvas">
                <span class="hamb-top"></span>
                <span class="hamb-middle"></span>
                <span class="hamb-bottom"></span>
            </button>
            <div class="container-fluid">
                <div class="row">
                    <div class="col">
                        <h1>
                            company name</span>
                            
                        </h1>

                        <table cellpadding="0" cellspacing="0" class="table table-striped table-bordered display"
                            style="width:100%" id="Orders">
                            <thead>
                                <tr>
                                    <th></th>
                                    <th>Πελάτης</th>
                                    <th>Ημερομηνία</th>
                                    <th>Είδος</th>
                                    <th>Κωδικός</th>
                                    <th>Εκτελέστηκε</th>
                                    <th>Εκτυπώθηκε</th>
                                    <th>Ποσό Χρέωσης</th>
                                    <th>Τεμάχια</th>
                                </tr>
                            </thead>
                            <tfoot>
                                <tr>
                                    <th></th>
                                    <th>Πελάτης</th>
                                    <th>Ημερομηνία</th>
                                    <th>Είδος</th>
                                    <th>Κωδικός</th>
                                    <th>Εκτελέστηκε</th>
                                    <th>Εκτυπώθηκε</th>
                                    <th>Ποσό Χρέωσης</th>
                                    <th>Τεμάχια</th>
                                </tr>
                            </tfoot>

                        </table>

                    </div>
                </div>
                
            </div>
        </div>
        <!-- /#page-content-wrapper -->

    </div>
    <!-- /#wrapper -->
    <script>
    $(document).ready(function() {
        var trigger = $('.hamburger'),
            overlay = $('.overlay'),
            isClosed = false;

        trigger.click(function() {
            hamburger_cross();
        });

        function hamburger_cross() {

            if (isClosed == true) {
                overlay.hide();
                trigger.removeClass('is-open');
                trigger.addClass('is-closed');
                isClosed = false;
            } else {
                overlay.show();
                trigger.removeClass('is-closed');
                trigger.addClass('is-open');
                isClosed = true;
            }
        }

        $('[data-toggle="offcanvas"]').click(function() {
            $('#wrapper').toggleClass('toggled');
        });
    });
    </script>


</body>

rf1234 · January 2023

Since you have no specific width settings for your table columns your column width is already set to auto.

Pliachas Paschalis · January 2023

and the js file

var Orderstable = $('#Orders').DataTable({

            dom: 'QBfrtip',
            //responsive: true,
            ajax: 'php/table.Orders.php',
            //scrollY: "300px",
            scrollX: true,
            scrollCollapse: true,
            autoWidth: true,
            columns: [
                {
                    className: 'dt-control',
                    orderable: false,
                    data: null,
                    defaultContent: '',
                    width: '10%'
                },
{
                    "data": "Customer",
                    //"width": "20%" 
                },
                {
                    "data": "PtDate",
                    //render: DataTable.render.date(),
                },
                {
                    "data": "Eidos"
                },
                {
                    data: "pCode"
                },
                {
                    data: "Done",
                    searchBuilder: {
                        orthogonal: {
                            display: 'filter'
                        }
                    },
                    render: function (data, type, row) {
                        if (type === 'display') {
                            return '<input type="checkbox" class="editor-active">';
                            //console.log("pas");
                        }
                        //console.log(data);
                        //console.log(type.value);
                        return data;
                    },
                    className: "dt-body-center",
                },
                {
                    "data": "Printed",
                    searchBuilder: {
                        orthogonal: {
                            display: 'filter'
                        }
                    },
                    render: function (data, type, row) {
                        if (type === 'display') {
                            return '<input type="checkbox" class="editor-active">';
                            //console.log("pas");
                        }
                        //console.log(data);
                        //console.log(type.value);
                        return data;
                    },
                    className: "dt-body-center",
                },
                {
                    "data": "PsoXreosis"
                },
                {
                    "data": "pTemaxia"
                },

            ],
            select: {
                style: 'os',
                selector: 'td:not(:first-child)'
            },
autoFill: false,
            lengthChange: true,
            buttons: [
                { extend: "create", editor: editor },
                { extend: "edit", editor: editor },
                { extend: "remove", editor: editor },
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
rowCallback: function (row, data) {
                // Set the checked state of the checkbox in the table
                //
                $('input.editor-active', row).prop('checked', data.Done == 1);
                $('input.editor-active', row).prop('checked', data.Printed == 1);
                //console.log('pas2');

            },
initComplete: function () {
                // Apply the search
                this.api().columns().every(function () {
                    var that = this;

                    $('input', this.footer()).on('keyup change clear', function () {
                        if (that.search() !== this.value) {
                            that
                                .search(this.value)
                                .draw();
                        }
                    });

                });
}

        });

rf1234 · January 2023

just remove

width: 10%

from your code above.

autoWidth = true

is normally redundant and can be omitted because it is the default

You might also need columns.adjust:
https://datatables.net/reference/api/columns.adjust()

Pliachas Paschalis · January 2023

on child table

$('#Orders tbody').on('click', 'td.dt-control', function () {
            var tr = $(this).closest('tr');
            var row = Orderstable.row(tr);
            var id = Orderstable.row(this).id();

            var idP = id.substring(4);
            console.log(idP);
            if (row.child.isShown()) {
                // This row is already open - close it
                destroyChild(row);
                tr.removeClass('shown');
            }
            else {
                // Open this row
                createChild(row, idP);
                tr.addClass('shown');
            }
        });
function createChild(row, idP) {
            // This is the table we'll convert into a DataTable
            var table = $('<table class="display" width="80%"/>');

            // Display it the child row
            row.child(table).show();
            var rowData = row.data();
            console.log(row);
            console.log(row.data);
            // Initialise as a DataTable
            var DetailsTable = table.DataTable({
                //dom: 'Bfrtip',
                scrollY: "300px",
                scrollX: true,
                scrollCollapse: true,
                pageLength: 5,
                ajax: {
                    url: 'php/table.OrderDetails.php',
                    type: 'post',
                    data: function (d) {
                        console.log(rowData.id);
                        //d.PtParaggel = rowData._id;
                        d.PtParaggel = idP;
                    }
                },
                columns: [
                    {
                        title: 'Πλαίσιο', data: 'OrderDetails.PtPlaisio',
                        render: function (data, type, row) {
                            if (type === 'display') {
                                return '<input type="checkbox" class="editor-active">';
                                //console.log("pas");
                            }
                            //console.log(data);
                            //console.log(type.value);
                            return data;
                        },
                        className: "dt-body-center",
                    },
                    { title: 'Ύψος', data: 'OrderDetails.PtIpsos' },
                    { title: 'Πλάτος', data: 'OrderDetails.PtPlatos' },
                    //{ title: 'Πελάτης', data: 'Orders.Customer' },
                    { title: 'Τεμάχια', data: 'OrderDetails.pTemaxia' },

                ],
                select: true,
                rowCallback: function (row, data) {
                    // Set the checked state of the checkbox in the table
                    
                    $('input.editor-active', row).prop('checked', data.PtPlaisio == 1);
                    console.log('pas2' + data);

                },
                columnDefs: [
                    { width: '20%', targets: 0 }
                ],
                fixedColumns: true,
                // buttons: [
                //  { extend: 'create', editor: usersEditor },
                //  { extend: 'edit', editor: usersEditor },
                //  { extend: 'remove', editor: usersEditor }
                // ]
            });
        }
function destroyChild(row) {
            var table = $("Orders", row.child());
            table.detach();
            table.DataTable().destroy();

            // And then hide the row
            row.child.hide();
        }

i couldn't manage to show correctly values on check box as i did in main table "Orders"
using this code:

$('input.editor-active', row).prop('checked', data.PtPlaisio == 1);

what am i mistaken?
Thanks in advance

allan · January 2023

I'd expect it to work. If it isn't, please link to a page showing the issue and I'll help to debug it.

Allan

Pliachas Paschalis · January 2023

Thanks for your response.
This is the link
https://vasiliadikousidi-gr.stackstaging.com/Orders_e.html
Thanks again

rf1234 · January 2023

I used the same code for a "dt-control" column (col 0 in the test case) and it worked fine. Strange. So I cannot help with this.

Just a laugh with automatic Google webpage translation. It automatically translated:
"Εκτελέστηκε" to German "Es wurde hingerichtet". That means: "It was put to death". (The right translation would have been just one word: "ausgeführt").

Never use automatic Google page translation it is just completely useless!

allan · January 2023

data.PtPlaisio should be data.OrderDetails.PtPlaisio in your rowCallback. That should fix it.

@rf1234 - yikes! Interestingly, DeepL appears to get it right.

Allan

rf1234 · January 2023

@allan, I agree, deepl.com is really the best translation solution!

They are in Köln / Cologne not in Silicon Valley and used to have a hard time to get proper financing. That has changed only recently. I am keeping my fingers crossed for them that they don't get crushed by the Valley giants.

allan · January 2023

I hope they don't and go on to great success ! My own language abilities are very limited, but I've been very impressed by DeepL so far. That they are out of the bubble probably helps!

Allan

Pliachas Paschalis · January 2023

Thanks for your answer. There is still one more problem. Column width. I want columns to get auto size.

kthorngren · January 2023

You either need to set the width of your search input to 100% or remove it from the column.

Something like this:

tfoot input {
  width: 100%;
}

Kevin

Question about Datatable behaviour

Question about Datatable behaviour

Answers

Howdy, Stranger!

Categories

DataTables

Question about Datatable behaviour

Question about Datatable behaviour

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables