DataTable with hidden columns

marisatraini

HI
in my project I need to create a table with hidden columns. I need these columns to store referential integrity keys between DB's tables. After I use them to perform record insertion operations in the database.
Below there are the DataTable that I build with ajax and the libraries that I use but unfortunately the library: https://cdn.datatables.net/2.0.5/js/dataTables.js gives me this error: "Uncaught TypeError: oCol is undefined"
I use bootstrap vers. 3.
What's the problem? Thanks

                            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
                      });                                             

JS Library:
<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

marisatraini

<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

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

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