Answers

• marisatraini Posts: 10Questions: 3Answers: 0

  May 2024 edited May 2024

  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
   
  <script src="https://cdn.datatables.net/1.13.10/js/jquery.dataTables.js"></script>
  
   <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/2.0.5/js/dataTables.js"></script>
  
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/responsive/3.0.2/js/dataTables.responsive.js"></script>
  
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/responsive/3.0.2/js/responsive.dataTables.js"></script>
  

  Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
• kthorngren Posts: 22,307Questions: 26Answers: 5,127

  May 2024 edited May 2024 Answer ✓

  Thanks for trying to format the code blocks. Use triple back ticks (```) instead of single quotes.

  I used https://beautifier.io/ to tidiy up your code so its easier to read:

                              var table_staff = $('#table_staff_membro').DataTable({
                                  "ajax": {
                                      url: "gestione_turni.php",
                                      cache: false,
                                      data: {
                                          "job": "get_profili_staff",
                                          "filter": function() {
                                              return "";
                                          },
                                          "username": "",
                                          "password": "",
                                          "id_persona": idPersona
                                      },
                                      dataType: "json",
                                      method: "POST"
                                  },
                                  "columns": [{
                                          "data": "staff"
                                      },
                                      {
                                          "data": "ruolo"
                                      },
                                      {
                                          "data": "gerarchia",
                                          "visible": "false"
                                      },
                                      {
                                          "data": "zona"
                                      },
                                      {
                                          "data": "id_territorio",
                                          "visible": "false"
                                      },
                                      {
                                          "data": "territorio"
                                      },
                                      {
                                          "targets": 6,
                                          "data": "btn_del_staff",
                                          "render": function(data, type, row, meta) {
                                              let k = j++;
                                              return "<button name='btn_del_profstaff_" + k + "' id='btn_del_profstaff_" + k + "' type='button' title='Cancella profilo' class='btn btn-sm'><i class='fa fa-eraser'></i></button>"
  
                                          }
                                      }
                                  ],
                                  "columnDefs": [{
                                          responsivePriority: 1,
                                          targets: 0
                                      },
                                      {
                                          responsivePriority: 2,
                                          targets: 1
                                      },
                                      {
                                          targets: 2,
                                          responsivePriority: 4,
                                          orderable: false,
                                          searchable: false
                                      },
                                      {
                                          responsivePriority: 3,
                                          targets: 3
                                      },
                                      {
                                          targets: 4,
                                          responsivePriority: 4,
                                          orderable: false,
                                          searchable: false
                                      },
                                      {
                                          responsivePriority: 4,
                                          targets: 5
                                      },
                                      {
                                          responsivePriority: 1,
                                          orderable: false,
                                          searchable: false,
                                          targets: 6
                                      }
                                  ],
                                  "order": [
                                      [0, 'asc']
                                  ],
                                  "success": function(data) {
                                      console.log(data);
                                  },
                                  "error": function(error, x, y) {},
                                  "destroy": true,
                                  "responsive": true
                              });
  

  There is nothing obvious in your code to suggest why the Uncaught TypeError: oCol is undefined error is occurring. You defined 7 columns in the columns definition. Do you have 7 columns defined in your table's thead?

  The "targets": 6, defined in the last column of columns is not an option that is used with columns. Its only used with columnDefs. It can be removed.

  You can move all your columnDefs definitions into the appropriate columns as only one target is defined for each. You can leave as is if you want to separate responsivePriority. Typically columnDefs is used to define the same options to multiple columns, ie, targets: [0, 1, 2]. Or if columns is not defined.

  This code section:

      "success": function(data) {
          console.log(data);
      },
      "error": function(error, x, y) {},
  

  Belongs inside the ajax option. However the ajax option docs states this about overriding the success option:

  success - Must not be overridden as it is used internally in DataTables. To manipulate / transform the data returned by the server use ajax.dataSrc (above), or use ajax as a function (below). It should be removed. You can move the error function into the ajax option if you wish.

  To troubleshoot we will need to see a link to a test case replicating the Uncaught TypeError: oCol is undefined error.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• marisatraini Posts: 10Questions: 3Answers: 0

  May 2024

  Thanks for the prompt reply,
  I checked: I had put an extra column header in the thead tag