Problem with select API

Alex99 · November 2020

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

tangerine · November 2020

Your test case console is showing 48 errors.

Alex99 · November 2020

i know, is because it needs php to go

kthorngren · November 2020

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

Alex99 · November 2020

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

kthorngren · November 2020

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

Alex99 · November 2020

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

kthorngren · 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

Alex99 · November 2020

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

kthorngren · November 2020

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

Alex99 · November 2020

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

colin · November 2020

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

Colin

Alex99 · November 2020

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

Alex99 · November 2020

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?

Alex99 · November 2020

Or a way to select all after data are loaded

kthorngren · November 2020

Are you fetching the child row data via Ajax?

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

Kevin

Alex99 · November 2020

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?

kthorngren · November 2020

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

Alex99 · November 2020

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?

kthorngren · November 2020

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

Alex99 · November 2020

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

kthorngren · November 2020

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

Kevin

Alex99 · November 2020

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

kthorngren · November 2020

Did you load the plugin as described in the instructions?

Kevin

Alex99 · November 2020

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

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

kthorngren · November 2020

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

Kevin

Alex99 · November 2020

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

Alex99 · November 2020

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?

kthorngren · November 2020

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

Problem with select API

Problem with select API

Replies

Howdy, Stranger!

Categories

DataTables

Problem with select API

Problem with select API

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables