Answers

• rf1234 Posts: 2,809Questions: 85Answers: 406

  January 2023

  Since you have no specific width settings for your table columns your column width is already set to auto.
• Pliachas Paschalis Posts: 62Questions: 12Answers: 1

  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 Posts: 2,809Questions: 85Answers: 406

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

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

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

  January 2023

  Thanks for your response.
  This is the link
  https://vasiliadikousidi-gr.stackstaging.com/Orders_e.html
  Thanks again
• rf1234 Posts: 2,809Questions: 85Answers: 406

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

  January 2023 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
• rf1234 Posts: 2,809Questions: 85Answers: 406

  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 Posts: 61,972Questions: 1Answers: 10,160 Site admin

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

  January 2023

  Thanks for your answer. There is still one more problem. Column width. I want columns to get auto size.
• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  January 2023 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