Problem with select API

Problem with select API

Alex99Alex99 Posts: 24Questions: 1Answers: 0

Link to test case: http://live.datatables.net/bugefufi/1/edit?html,css,js,console,output, it doesn't work beacuase it requires php, but is for showing my complete code
Debugger code (debug.datatables.net): osezel
Error messages shown: no error message
Description of problem:
I send data to my php page with this type of array :

$colonne = array(
    array(
        'db' => 'IDAzienda',
        'dt' => "IDAzienda",
        'classname' => 'vertical-middle dc-center',
        'orderable' => 'false',
        'type' => 'button_plus',
        'icon' => 'icon-plus',
        'class' => 'btn btn-mini bnn btn-yellow'
    ),
    array(
        'db' => '',
        'dt' => '',
        'orderable' => 'false',
        'classname' => 'vertical-middle dc-center',
        'type' => 'checkbox'
    ), // and so on...

i send the array to sspclass
the json response is correct

as you can see in render i cycle the php array and handle each type case of the column i need

In the fnCreatedRow i create a function with onclick event :

const apririga = (tipo) => function(){

where i use fnOpen to open the row i clicked on and write a new table:

var oTable = $('#scadenziario').dataTable();
                                                                    // 'open' an information row when parent row is clicked
                                                                    if (oTable.fnIsOpen($('#' + churchid).get(0)) ) {
                                                                        oTable.fnClose($('#' + churchid).get(0)); // churchinfo div remains in DOM, saving us from future AJAX calls
                                                                    } else {
                                                                        oTable.fnOpen( $('#' + churchid).get(0), '<table id="riga_scadenziario_' + churchid + '" class="table table-bordered hover dataTable dtr-inline"> <thead> <th>Num.</th><th></th><th>Sel.</th><th>Attività</th><th>Tipo Documento</th><th>N° Documento</th><th>Data Documento</th><th>Data Scadenza</th><th>Originario</th><th>Residuo</th><th>N° Mail</th><th>N° Contatti</th><th>Stato 1</th><th>Stato 2</th><th>Anticipo</th><th>Spedire A</th><th>P.O.</th><th>Cod. Banca</th><th>Lista Email</th><th>Desc. 1</th><th>Desc. 2</th> </thead><tfoot><th colspan="8">Totale Selezionato</th><th></th><th></th><th colspan="11"></th></tfoot> </table>', "class-detail-row" );
                                                                    }

after this i initialize the table created with datatable...this work pretty well, but when i clicked on the checkbox i need to select all of the rows of the second table

if i

console.log(rigaTabella.row(0).data()); 

it returns undefined (rigaTabella is the table created), you can see all of this in the code above

I think I made myself clear, tell me if you not understand.
I don't understand why it returns undefined, i have tried this to see if my table exist:

 $.fn.dataTable.tables(); 

Replies

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    Your test case console is showing 48 errors.

  • Alex99Alex99 Posts: 24Questions: 1Answers: 0

    i know, is because it needs php to go

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736

    Thats a lot of code to simply look at to try and debug the problem. Is it possible for to build a test case with example data (removing the PHP) so we can help debug? See this Javascript sourced data example.

    I don't understand why it returns undefined, i have tried this to see if my table exist:

    Normally the $.fn.dataTable.isDataTable() is used to see if the table exists.

    it returns undefined (rigaTabella is the table created), you can see all of this in the code above

    Probably a scoping problem which is causing the rigaTabella to not be available. You can get an instance of the Datatable API with something like this:

    var rigaTabella = $('#myTableId').DataTable();
    console.log(rigaTabella.row(0).data());
    

    Where myTableId is the id of the table you want to use.

    Kevin

  • Alex99Alex99 Posts: 24Questions: 1Answers: 0

    Hi kevin, thanks for your response

    This is the new link http://live.datatables.net/bugefufi/2/edit?html,js,console,output, unfortunately i cant' show data for customer privacy

    I put this:

    var rigaTabella = $('#myTableId').DataTable();
    console.log(rigaTabella.row(0).data());
    

    and returned undefined

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736

    unfortunately i cant' show data for customer privacy

    Since the actual data is not causing the problem we expect fake data.

    You are getting this error in the browser's console:

    VM328 jquery.dataTables.js:3293 Uncaught TypeError: Cannot set property 'nTf' of undefined

    Its due to having too many columns in your footer. I fixed that by chainging your last colspan to 7.

    Datatables expects the data to be contained in an array so I changed your data variable to this:

    var colonne = [
      [ "A","A","B","C","C","C", " C", " C"," C","C ","C "," C","C ","C ","C " ]
    ];
    

    Here is the updated test case:
    http://live.datatables.net/wocamowa/1/edit

    What are the steps to show the problem you are having.

    Are you trying to create child detail rows as shown in this example?

    Kevin

  • Alex99Alex99 Posts: 24Questions: 1Answers: 0

    Thanks Kevin,

    yes i am trying to create child detail rows, and with fnCreatedRow work pretty well, the row opens correctly and show data correctly

    The row opens after clicking one of these element:

    var button = nRow.firstChild.firstChild;
    var checkbox1 = nRow.childNodes;
    
    button.onclick       = apririga(1);
    checkbox1[1].onclick = apririga(2);
    

    Apririga is the function that create the new datatable
    The problem is for selecting row...when i click on checkbox1[1] i need to select all of the rows of the table created, and i tried doing this: rigaTabella.rows().select(), but nothing happened

    in the example you can see all of these function...maybe i call the api in the wrong place? i don't know

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736
    edited November 2020

    I clicked on the A in the Ragione Sociale column and an empty child row is opened. Is this correct?

    Please provide the steps of what to click. Just showing code snippets of what to click doesn't help us.

    when i click on checkbox1[1]

    I'm not sure what this is in the test case.

    Kevin

  • Alex99Alex99 Posts: 24Questions: 1Answers: 0

    In the test case is correct because there aren't data for the second table

    This is what happened when i click on the checkbox (checkbox1[1] in test case), you see empty for customer privacy,but i have to select all the row of second table

    As you can see from the screenshot the table is created correctly

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736

    You and I must be looking at two different things. This is what I see in the test case:

    Do you have an updated link for the screenshot you posted?

    Kevin

  • Alex99Alex99 Posts: 24Questions: 1Answers: 0

    The screenshot i posted is from my actual result, is not the same as the test case, but i posted the test case only for show you the complete code.

    I can't replicate the result i have on test case

    This is the point where i'm stuck:

    var table = $('#scadenziario').DataTable({
    ....
    "fnCreatedRow": function( nRow, aData, iDataIndex ) {
    
          $(nRow).attr('id', aData['idScadenziario']); 
    
          var button = nRow.firstChild.firstChild;
          var checkbox1 = nRow.childNodes; //the checkbox in screenshot
    
     
          const apririga = (tipo) => function(){ //function for create the table
    
            churchid = aData['idScadenziario'];
    
            var oTable = $('#scadenziario').dataTable();
    
            if (oTable.fnIsOpen($('#' + churchid).get(0)) ) { 
              oTable.fnClose($('#' + churchid).get(0)); 
            } else {
              oTable.fnOpen( $('#' + churchid).get(0), '<table id="riga_scadenziario_' + churchid + '" class="table table-bordered hover dataTable dtr-inline"> <thead> <th>Num.</th><th></th><th>Sel.</th><th>Attività</th><th>Tipo Documento</th><th>N° Documento</th><th>Data Documento</th><th>Data Scadenza</th><th>Originario</th><th>Residuo</th><th>N° Mail</th><th>N° Contatti</th><th>Stato 1</th><th>Stato 2</th><th>Anticipo</th><th>Spedire A</th><th>P.O.</th><th>Cod. Banca</th><th>Lista Email</th><th>Desc. 1</th><th>Desc. 2</th> </thead><tfoot><th colspan="8">Totale Selezionato</th><th></th><th></th><th colspan="11"></th></tfoot> </table>', "class-detail-row" );
            }
    
            //new table 
            var rigaTabella = $('#riga_scadenziario_' + churchid).DataTable({
              select: {
                style: 'multi',
                info: false,
                selector: 'input:checkbox'
              },
              order: [],
              processing: true,
              "pagingType": "input",
              language: {
                processing: '',
              },
             
              'serverSide': false,
              'serverMethod': 'post',
              "lengthMenu": [[ 25 , 50 , 100, 250, 500], [ 25 , 50 , 100, 250, 500]],
              "pageLength":25,
              columnDefs: [],
              "deferRender": true,
              orderFixed: [],
              "columns": [ //the data come from json ]
            });
    
            if(tipo == 2){ //if is clicked the checkbox i need to select all 
                //if ($(this).is( ":checked" )) {
                     rigaTabella = $('#riga_scadenziario_' + churchid).DataTable();
                     console.log(rigaTabella.row(0).data()); //this return undefined
                     rigaTabella.rows().select(); // don't work
                //}else {
                  rigaTabella.rows().deselect();
                //}
            }
    
            // });
          }; //finish of the onclick function
    
          // console.log(rigaTabella.column(9, {selected: true}).data().sum());
    
          button.onclick       = apririga(1); //call the function with tipo==1
          checkbox1[1].onclick = apririga(2); //call the function with tipo==2
        } //finish of fnCreateRow
    ....
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    We need to see the test case reproducing the problem you want help with. Otherwise, we could be talking cross-purposes.

    Colin

  • Alex99Alex99 Posts: 24Questions: 1Answers: 0

    This is new test case: http://live.datatables.net/wocamowa/2/edit?html,js,console,output..i don't understand why it works

  • Alex99Alex99 Posts: 24Questions: 1Answers: 0

    I think the problem is that the data are loaded throught ajax, is there a way to open the row only on ajax success response?

  • Alex99Alex99 Posts: 24Questions: 1Answers: 0

    Or a way to select all after data are loaded

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736

    Are you fetching the child row data via Ajax?

    You can use the initComplete function to process the table after it has initialized.

    Kevin

  • Alex99Alex99 Posts: 24Questions: 1Answers: 0

    I resolve the problem doing this :

    rigaTabella.on( 'draw', function () {                                                                                                                   
               rigaTabella.rows().select(); 
     } );
    

    But now i have another problem.. how can i sum data of a column of each row selected?

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736

    Are you using something like this example to sum the column? If so you can use selector-modifier of {selected:true}. See the selected example in the docs.

    Kevin

  • Alex99Alex99 Posts: 24Questions: 1Answers: 0

    I am referring to the second table created.

    I have tried this :

    rigaTabella.on( 'click', 'td:nth-child(3)', function () {
         var rows = rigaTabella.rows( { selected: true } ).indexes();                                                                      
         console.log(rigaTabella.cells( rows, 8 ).data());
    });
    

    I put that inside the function that creates the second table, but it doesn't return the selected column value...

    Is there a way to get data of the second table outside the first one?

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736

    but it doesn't return the selected column value...

    What is returned?

    You code snippet works here:
    http://live.datatables.net/kozamexe/1/edit

    I only changed the column selector from 8 to 0 for the test case.

    Can you update your test case to show the issue?

    Kevin

  • Alex99Alex99 Posts: 24Questions: 1Answers: 0

    Here is the new link: http://live.datatables.net/wocamowa/2/edit?html,js,console,output

    i need the value of that column and a way to sum each value selected

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736

    You can use the sum() plugin to get the sum of a Datatabes dataset. For example:
    http://live.datatables.net/cebukube/1/edit

    Kevin

  • Alex99Alex99 Posts: 24Questions: 1Answers: 0

    I get this error : rigaTabella.cells(...).data(...).sum is not a function

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736

    Did you load the plugin as described in the instructions?

    Kevin

  • Alex99Alex99 Posts: 24Questions: 1Answers: 0

    Oh sorry, i didn't see the link to include :neutral:

    Now im trying to sum the values of each row every time i select one, doing this:

    rigaTabella.on( 'click', 'td:nth-child(3)', function () {
        var rows = rigaTabella.rows( { selected: true } ).indexes();
        var rowClicked = rigaTabella.rows(this).indexes();
        console.log(rigaTabella.cells(rowClicked,8).data() + rigaTabella.cells( rows, 8 ).data().sum());
    });
    

    After i need to know, if exist a way to get the row selected of the table created from outside the "general" table

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736

    Use the same technique. You may need to get an instance of the child table API as discussed here.

    Kevin

  • Alex99Alex99 Posts: 24Questions: 1Answers: 0

    I can't get the instace of the table created because i don't know the id of the table, because is dynamic

    Maybe i can save the id into a hidden element

  • Alex99Alex99 Posts: 24Questions: 1Answers: 0

    I don't know how to open all row : http://live.datatables.net/cebukube/2/edit?html,js,console,output, and why there isn't the th checkbox?

    Any suggestions?

  • kthorngrenkthorngren Posts: 20,143Questions: 26Answers: 4,736

    I don't know how to open all row

    You can loop through all the rows with rows().every() and open them in the loop.

    why there isn't the th checkbox?

    The select extension doesn't add a checkbox in the th. You will need to add this manually or you can use the Gyrocode Checkboxes plugin which uses the select extension and adds a select all checkbox in the header.

    Kevin

This discussion has been closed.