Question about Datatable behaviour

Question about Datatable behaviour

Pliachas PaschalisPliachas Paschalis Posts: 62Questions: 12Answers: 1

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>

This question has accepted answers - jump to:

Answers

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

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

  • Pliachas PaschalisPliachas Paschalis Posts: 62Questions: 12Answers: 1

    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();
                            }
                        });
    
                    });
    }
    
            });
    
    
    
    
    
    
    
  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406
    edited 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 PaschalisPliachas Paschalis Posts: 62Questions: 12Answers: 1

    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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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 PaschalisPliachas Paschalis Posts: 62Questions: 12Answers: 1

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

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    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!

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    Answer ✓

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

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

    Allan

  • rf1234rf1234 Posts: 2,801Questions: 85Answers: 406

    @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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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 PaschalisPliachas Paschalis Posts: 62Questions: 12Answers: 1

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736
    edited January 2023 Answer ✓

    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

Sign In or Register to comment.