Multiple checkbox columns

PabloIE · May 2017

I'm trying to adapt your running example ( https://editor.datatables.net/examples/api/checkbox.html ) adding more checkbox columns.
I cannot make it work properly and i think the issue comes from the callback function that it's designed for an only checkbox columns at the last column of the table. It checks the field at the database but it doesn't keeps it checked on the table. Unchecking doesn't works when checking again. Buble editing does work.
Code is taken from the running example so i don't think it's useful to post it here again.
Could you give me some tips to follow on this?

Thank you in advance.

allan · May 2017

Have you updated the code to use different classes and event handlers for the other columns?

If you could show me your code I might be able to spot what is wrong.

Allan

PabloIE · May 2017

Hi Allan , thanks for answering.

No i didn't do that ( will try them of course ) , tried many thinks in order to simplify code but as you'r telling me i think it would be more tricky than expected.

I put here the final .html generated ( i do it using php ) . You'll see lot of commented lines due to testing but tried even more things...forgive me if you see some nonsense things


<head>
<meta charset="utf-8">
<link href="http://www.datatables.net/favicon.ico" rel="shortcut icon" type="image/ico" /><meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title></title>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="/../../Editor/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="/../../Editor/examples/resources/syntax/shCore.css" rel="stylesheet" type="text/css" />
<link href="/../../Editor/examples/resources/demo.css" rel="stylesheet" type="text/css" />
<link href="/../../Editor/gestion/css/tabla.css" rel="stylesheet" type="text/css" />
<style class="init" type="text/css">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
  </script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js">
  </script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js">
  </script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js">
  </script><script type="text/javascript" language="javascript" src="/../../Editor/js/dataTables.editor.js"> 
  </script><script type="text/javascript" language="javascript" src="/../../Editor/js/dataTables.editor.min.js">
  </script><script type="text/javascript" language="javascript" src="/../../Editor/examples/resources/syntax/shCore.js">
  
 <!-- 
  </script><script type="text/javascript" language="javascript" src="/../../Editor/examples/resources/editor-demo.js">
  -->
 
  </script><script type="text/javascript" language="javascript" class="init">
  
  


var editor; // use a global for the submit and return data rendering in the examples
var seleccionado = "";
var col = 0;
$(document).ready(function(){
    
  editor = new $.fn.dataTable.Editor({
    ajax: "/../../Editor/gestion/php/Listados.php",
    type: 'POST',
    table: "#Girasol_Datos_16",
  fields: [ { label: "Cliente:", name: "Cliente" },{ label: "Variedad:", name: "Variedad" },{ label: "Clearfield:", name: "Clearfield", type:  "checkbox", separator: "|", options:  [{ label: '', value: 1 }] },{ label: "Regadio:", name: "Regadio", type:  "checkbox", separator: "|", options:  [{ label: '', value: 1 }] },{ label: "Superficie:", name: "Superficie" },{ label: "Bolsas:", name: "Bolsas" },{ label: "Resiembra:", name: "Resiembra", type:  "checkbox", separator: "|", options:  [{ label: '', value: 1 }] },{ label: "Bols_Res:", name: "Bols_Res" },{ label: "Promocion:", name: "Promocion", type:  "checkbox", separator: "|", options:  [{ label: '', value: 1 }] },{ label: "BolsPromc:", name: "BolsPromc" },{ label: "Sentimiento:", name: "Sentimiento" },{ label: "Kilos:", name: "Kilos" },{ label: "Comentarios:", name: "Comentarios" },{ label: "Contacto:",  name: "Contacto"} ]
  });
  $('#Girasol_Datos_16').DataTable( {
    dom: "Bfrtip",
    ajax: {
      url: "/../../Editor/gestion/php/Listados.php",
      type: 'POST'
    },
    columns: [ { data : "Cliente" },  { data : "Variedad" },  { data : "Clearfield" ,render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return   '<input type="checkbox" class="editor-active" id="check4">';
                    }
                    return data;
                    },
                    className: "dt-body-center"},  { data : "Regadio" ,render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return   '<input type="checkbox" class="editor-active" id="check6">';
                    }
                    return data;
                    },
                    className: "dt-body-center"},  { data : "Superficie" },  { data : "Bolsas" },  { data : "Resiembra" ,render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return   '<input type="checkbox" class="editor-active" id="check12">';
                    }
                    return data;
                    },
                    className: "dt-body-center"},  { data : "Bols_Res" },  { data : "Promocion" ,render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return   '<input type="checkbox" class="editor-active" id="check16">';
                    }
                    return data;
                    },
                    className: "dt-body-center"},  { data : "BolsPromc" },  { data : "Sentimiento" },  { data : "Kilos" },  { data : "Comentarios" },  { data : "Contacto"}],
    select:  {
            style: 'os',
            selector: 'td:not(:has(:checkbox))' // no row selection on last column
        },
    buttons: [
      { extend: "create", editor: editor },
      { extend: "edit",   editor: editor },
      { extend: "remove", editor: editor }
    ],
    rowCallback: function ( row, data ) {
        
            // // Set the checked state of the checkbox in the table
        
            // $.each( data, function( key, value )
            // {
                // if (value == 1){
                    
                    // $('input.editor-active:checked').prop( 'checked', data[seleccionado] == 1 );
                // }
                // else{
                    // if (value == 0){
                        // $('input.editor-active:checked').prop( 'checked', data[seleccionado] == 1 );
                    // }
                    // else{}
                // }
            // });
            // var aux = "data." + seleccionado;
            // for ( var i=0; i < col;i++){
                //var aux = $('input.editor-active',row)[i];
                // $('input.editor-active',row).each(function(){
                    // if (data.Promocion ==  1 && i == col-1){
                        // ($('input.editor-active',row)[i]).checked = true;
                    // }
                // }        
                        // if(data.Promocion == 1 && i == col-1){
                            // $('input.editor-active',row).prop('checked',true);
                        // }
                        // else{
                            // $('input.editor-active',row).prop('checked',false);
                        // }
                // });
                
                    // if (aux.checked)
                    // {
                        // $(aux).prop('checked',true);
                        // aux.
                    // }
                    // else{
                        // $(aux).prop('checked',false);
                     //}
                //}
                // if (col > 0){
                    // if (data.Promocion == 1){
                        // ($('input.editor-active')[col-1]).checked = true;
                    // }
                    // else{
                        // ($('input.editor-active')[col-1]).checked = false;
                    // }
                // }
                // else{
                    
                    $("input#check" + col+ ".editor-active").prop('checked', data.Promocion == 1);
                    //$('input.editor-active', row).prop( 'checked', data.Promocion == 1 );
                //}
        }

        });
        
        $('#Girasol_Datos_16').on( 'change', 'input.editor-active', function () {
        
        col =$(this).parent().index();
        var title = $(this).closest("table").find("th").eq(col).text();         
        title.replace(/\"/g, "");
        col = $('input').index(this);
        seleccionado = title;  // Guardamos el nombre de la columna del checkbox seleccionado para usarla en el callback
        editor
            .edit( $(this).closest('tr'), false )
            .set( title , $(this).prop( 'checked' ) ? 1 : 0 )   
            .submit();
                        
    } );
});

</script>
<script>
function myFunction(){
        window.location.href = "/../../node/1";
}
</script>
<body>
<div class="container">
<div id="Contenedor"><button id="volver" onclick="myFunction()">Mostrar Todas</button></div>
<div id="tablasProduccion">
<table class="table display table-striped table-bordered" id="Girasol_Datos_16">
    <thead>
        <tr><th>Cliente</th><th>Variedad</th><th>Clearfield</th><th>Regadio</th><th>Superficie</th><th>Bolsas</th><th>Resiembra</th><th>Bols_Res</th><th>Promocion</th><th>BolsPromc</th><th>Sentimiento</th><th>Kilos</th><th>Comentarios</th><th>Contacto</th>        
        </tr>
    </thead>
    <tfoot>
        <tr><th>Cliente</th><th>Variedad</th><th>Clearfield</th><th>Regadio</th><th>Superficie</th><th>Bolsas</th><th>Resiembra</th><th>Bols_Res</th><th>Promocion</th><th>BolsPromc</th><th>Sentimiento</th><th>Kilos</th><th>Comentarios</th><th>Contacto</th>
        </tr>
    </tfoot>
</table>
</div>
</div> </body>

allan · May 2017

Yes, that looks like it is the issue.

If we take this example and looking at the code displayed just below the table, to make another column with checkboxes you would have:

Lines 44-52 duplicated for the other checkbox column, but have a unique class for the checkboxes in each column. I would suggest using class names which are representative of the data.
Line 65 - duplicate with the updated class and data point
Lines 69-74 - duplicate and update for the correct class and field name.

Allan

PabloIE · May 2017

Thank you so much Allan ,
Sometimes we don't see the answer although we have it in front. I will test it when i got a bit of free time and give you feedback on results.

PabloIE · May 2017

Hi ,

I finally made it work , following Allan instructions i could notice that it was wrong and diging on a conceptual mistake .As the html file is dynamically generated by a php script i was focusing too deep pretending i was treating the thread as an array problem when i was not really doing it.

I'll try and clean it of errors but i can now share my first approach on this , hope this can help others.

Again my thanks to you Allan for your fast and efficient help




<head>
<meta charset="utf-8">
<link href="http://www.datatables.net/favicon.ico" rel="shortcut icon" type="image/ico" /><meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title></title>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="/../../Editor/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="/../../Editor/examples/resources/syntax/shCore.css" rel="stylesheet" type="text/css" />
<link href="/../../Editor/examples/resources/demo.css" rel="stylesheet" type="text/css" />
<link href="/../../Editor/gestion/css/tabla.css" rel="stylesheet" type="text/css" />
<style class="init" type="text/css">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
  </script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js">
  </script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js">
  </script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js">
  </script><script type="text/javascript" language="javascript" src="/../../Editor/js/dataTables.editor.js"> 
  </script><script type="text/javascript" language="javascript" src="/../../Editor/js/dataTables.editor.min.js">
  </script><script type="text/javascript" language="javascript" src="/../../Editor/examples/resources/syntax/shCore.js">
  
 <!-- 
  </script><script type="text/javascript" language="javascript" src="/../../Editor/examples/resources/editor-demo.js">
  -->
 
  </script><script type="text/javascript" language="javascript" class="init">
  
  
// use a global for the submit and return data rendering in the examples
var editor; 
var title = "";
var col = 0;
var listaCampos=[];

$(document).ready(function(){
    
  editor = new $.fn.dataTable.Editor({
    ajax: "/../../Editor/gestion/php/Listados.php",
    type: 'POST',
    table: "#Girasol_Datos_16",
  fields: [ { label: "Cliente:", name: "Cliente" },{ label: "Variedad:", name: "Variedad" },{ label: "Clearfield:", name: "Clearfield", type:  "checkbox", separator: "|", options:  [{ label: '', value: 1 }] },{ label: "Regadio:", name: "Regadio", type:  "checkbox", separator: "|", options:  [{ label: '', value: 1 }] },{ label: "Superficie:", name: "Superficie" },{ label: "Bolsas:", name: "Bolsas" },{ label: "Resiembra:", name: "Resiembra", type:  "checkbox", separator: "|", options:  [{ label: '', value: 1 }] },{ label: "Bols_Res:", name: "Bols_Res" },{ label: "Promocion:", name: "Promocion", type:  "checkbox", separator: "|", options:  [{ label: '', value: 1 }] },{ label: "BolsPromc:", name: "BolsPromc" },{ label: "Sentimiento:", name: "Sentimiento" },{ label: "Kilos:", name: "Kilos" },{ label: "Comentarios:", name: "Comentarios" },{ label: "Contacto:",  name: "Contacto"} ]
  });
  $('#Girasol_Datos_16').DataTable( {
    dom: "Bfrtip",
    ajax: {
      url: "/../../Editor/gestion/php/Listados.php",
      type: 'POST'
    },
    columns: [ { data : "Cliente" },  { data : "Variedad" },  { data : "Clearfield" ,render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return   '<input type="checkbox" class="Clearfield">';
                    }
                    return data;
                    },
                    className: "dt-body-center"},  { data : "Regadio" ,render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return   '<input type="checkbox" class="Regadio">';
                    }
                    return data;
                    },
                    className: "dt-body-center"},  { data : "Superficie" },  { data : "Bolsas" },  { data : "Resiembra" ,render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return   '<input type="checkbox" class="Resiembra">';
                    }
                    return data;
                    },
                    className: "dt-body-center"},  { data : "Bols_Res" },  { data : "Promocion" ,render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return   '<input type="checkbox" class="Promocion">';
                    }
                    return data;
                    },
                    className: "dt-body-center"},  { data : "BolsPromc" },  { data : "Sentimiento" },  { data : "Kilos" },  { data : "Comentarios" },  { data : "Contacto"}],
    select:  {
            style: 'os',
            selector: 'td:not(:has(:checkbox))' // no row selection on last column
        },
    buttons: [
      { extend: "create", editor: editor },
      { extend: "edit",   editor: editor },
      { extend: "remove", editor: editor }
    ],
    rowCallback: function ( row, data ) {
        // Set the checked state of the checkbox in the table   
        
            
            
                            listaCampos.push("Clearfield");         
                            listaCampos.push("Regadio");            
                            listaCampos.push("Resiembra");          
                            listaCampos.push("Promocion");                          
            
            for (var i=0 ; i < listaCampos.length ; i++){
                
                    var aux = "input." + listaCampos[i];
                    
                    $(aux, row).prop( 'checked', data[listaCampos[i]] == 1 );
            }
            
        }
        });
                
                            $('#Girasol_Datos_16').on( 'change', 'input.Clearfield', function () {          

                            editor
                                .edit( $(this).closest('tr'), false )
                                .set( 'Clearfield' , $(this).prop( 'checked' ) ? 1 : 0 )    
                                .submit();
                                            
                        } );
                            $('#Girasol_Datos_16').on( 'change', 'input.Regadio', function () {         

                            editor
                                .edit( $(this).closest('tr'), false )
                                .set( 'Regadio' , $(this).prop( 'checked' ) ? 1 : 0 )   
                                .submit();
                                            
                        } );
                            $('#Girasol_Datos_16').on( 'change', 'input.Resiembra', function () {           

                            editor
                                .edit( $(this).closest('tr'), false )
                                .set( 'Resiembra' , $(this).prop( 'checked' ) ? 1 : 0 ) 
                                .submit();
                                            
                        } );
                            $('#Girasol_Datos_16').on( 'change', 'input.Promocion', function () {           

                            editor
                                .edit( $(this).closest('tr'), false )
                                .set( 'Promocion' , $(this).prop( 'checked' ) ? 1 : 0 ) 
                                .submit();
                                            
                        } );
                
                
        
});

</script>
<script>
function myFunction(){
        window.location.href = "/../../node/1";
}
</script>
<body>
<div class="container">
<div id="Contenedor"><button id="volver" onclick="myFunction()">Mostrar Todas</button></div>
<div id="tablasProduccion">
<table class="table display table-striped table-bordered" id="Girasol_Datos_16">
    <thead>
        <tr><th>Cliente</th><th>Variedad</th><th>Clearfield</th><th>Regadio</th><th>Superficie</th><th>Bolsas</th><th>Resiembra</th><th>Bols_Res</th><th>Promocion</th><th>BolsPromc</th><th>Sentimiento</th><th>Kilos</th><th>Comentarios</th><th>Contacto</th>        
        </tr>
    </thead>
    <tfoot>
        <tr><th>Cliente</th><th>Variedad</th><th>Clearfield</th><th>Regadio</th><th>Superficie</th><th>Bolsas</th><th>Resiembra</th><th>Bols_Res</th><th>Promocion</th><th>BolsPromc</th><th>Sentimiento</th><th>Kilos</th><th>Comentarios</th><th>Contacto</th>
        </tr>
    </tfoot>
</table>
</div>
</div> </body>

PabloIE · May 2017

Revised code and fixed some issues . It works properly now.
But i spotted a strange behaviour , if i select a row and then move to next results page it remains as selected unless i select another one on the next results page. it's there something wrong in my code?



<head>
<meta charset="utf-8">
<link href="http://www.datatables.net/favicon.ico" rel="shortcut icon" type="image/ico" /><meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title></title>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="/../../Editor/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="/../../Editor/examples/resources/syntax/shCore.css" rel="stylesheet" type="text/css" />
<link href="/../../Editor/examples/resources/demo.css" rel="stylesheet" type="text/css" />
<link href="/../../Editor/gestion/css/tabla.css" rel="stylesheet" type="text/css" />
<style class="init" type="text/css">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
  </script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js">
  </script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js">
  </script><script type="text/javascript" language="javascript" src="https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js">
  </script><script type="text/javascript" language="javascript" src="/../../Editor/js/dataTables.editor.js"> 
  </script><script type="text/javascript" language="javascript" src="/../../Editor/js/dataTables.editor.min.js">
  </script><script type="text/javascript" language="javascript" src="/../../Editor/examples/resources/syntax/shCore.js">
  
 <!-- 
  </script><script type="text/javascript" language="javascript" src="/../../Editor/examples/resources/editor-demo.js">
  -->
 
  </script><script type="text/javascript" language="javascript" class="init">
  
  
// use a global for the submit and return data rendering in the examples
var editor; 



$(document).ready(function(){
    
  editor = new $.fn.dataTable.Editor({
    ajax: "/../../Editor/gestion/php/Listados.php",
    type: 'POST',
    table: "#Girasol_Datos_16",
  fields: [ { label: "Cliente:", name: "Cliente" },{ label: "Variedad:", name: "Variedad" },{ label: "Clearfield:", name: "Clearfield", type:  "checkbox", separator: "|", options:  [{ label: '', value: 1 }] },{ label: "Regadio:", name: "Regadio", type:  "checkbox", separator: "|", options:  [{ label: '', value: 1 }] },{ label: "Superficie:", name: "Superficie" },{ label: "Bolsas:", name: "Bolsas" },{ label: "Resiembra:", name: "Resiembra", type:  "checkbox", separator: "|", options:  [{ label: '', value: 1 }] },{ label: "Bols_Res:", name: "Bols_Res" },{ label: "Promocion:", name: "Promocion", type:  "checkbox", separator: "|", options:  [{ label: '', value: 1 }] },{ label: "BolsPromc:", name: "BolsPromc" },{ label: "Sentimiento:", name: "Sentimiento" },{ label: "Kilos:", name: "Kilos" },{ label: "Comentarios:", name: "Comentarios" },{ label: "Contacto:",  name: "Contacto"} ]
  });
  $('#Girasol_Datos_16').DataTable( {
    dom: "Bfrtip",
    ajax: {
      url: "/../../Editor/gestion/php/Listados.php",
      type: 'POST'
    },
    columns: [ { data : "Cliente" },  { data : "Variedad" },  { data : "Clearfield" ,render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return   '<input type="checkbox" class="Clearfield">';
                    }
                    return data;
                    },
                    className: "dt-body-center"},  { data : "Regadio" ,render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return   '<input type="checkbox" class="Regadio">';
                    }
                    return data;
                    },
                    className: "dt-body-center"},  { data : "Superficie" },  { data : "Bolsas" },  { data : "Resiembra" ,render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return   '<input type="checkbox" class="Resiembra">';
                    }
                    return data;
                    },
                    className: "dt-body-center"},  { data : "Bols_Res" },  { data : "Promocion" ,render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return   '<input type="checkbox" class="Promocion">';
                    }
                    return data;
                    },
                    className: "dt-body-center"},  { data : "BolsPromc" },  { data : "Sentimiento" },  { data : "Kilos" },  { data : "Comentarios" },  { data : "Contacto"}],
    select:  {
            style: 'os',
            selector: 'td:not(:has(:checkbox))'
        },
    buttons: [
      { extend: "create", editor: editor },
      { extend: "edit",   editor: editor },
      { extend: "remove", editor: editor }
    ],
    rowCallback: function ( row, data ) {
        // Set the checked state of the checkbox in the table   
            
            var listaCampos=[];
            
            
                            listaCampos.push("Clearfield");         
                            listaCampos.push("Regadio");            
                            listaCampos.push("Resiembra");          
                            listaCampos.push("Promocion");                          
            
            for (var i=0 ; i <= listaCampos.length ; i++){
                
                    var aux = "input." + listaCampos[i];
                    
                    $(aux, row).prop( 'checked', data[listaCampos[i]] == 1 );
            }
            
        }
        });
                
                            $('#Girasol_Datos_16').on( 'change', 'input.Clearfield', function () {          

                            editor
                                .edit( $(this).closest('tr'), false )
                                .set( 'Clearfield' , $(this).prop( 'checked' ) ? 1 : 0 )    
                                .submit();
                                            
                        } );
                            $('#Girasol_Datos_16').on( 'change', 'input.Regadio', function () {         

                            editor
                                .edit( $(this).closest('tr'), false )
                                .set( 'Regadio' , $(this).prop( 'checked' ) ? 1 : 0 )   
                                .submit();
                                            
                        } );
                            $('#Girasol_Datos_16').on( 'change', 'input.Resiembra', function () {           

                            editor
                                .edit( $(this).closest('tr'), false )
                                .set( 'Resiembra' , $(this).prop( 'checked' ) ? 1 : 0 ) 
                                .submit();
                                            
                        } );
                            $('#Girasol_Datos_16').on( 'change', 'input.Promocion', function () {           

                            editor
                                .edit( $(this).closest('tr'), false )
                                .set( 'Promocion' , $(this).prop( 'checked' ) ? 1 : 0 ) 
                                .submit();
                                            
                        } );
                
                
        
});

</script>
<script>
function myFunction(){
        window.location.href = "/../../node/1";
}
</script>
<body>
<div class="container">
<div id="Contenedor"><button id="volver" onclick="myFunction()">Mostrar Todas</button></div>
<div id="tablasProduccion">
<table class="table display table-striped table-bordered" id="Girasol_Datos_16">
    <thead>
        <tr><th>Cliente</th><th>Variedad</th><th>Clearfield</th><th>Regadio</th><th>Superficie</th><th>Bolsas</th><th>Resiembra</th><th>Bols_Res</th><th>Promocion</th><th>BolsPromc</th><th>Sentimiento</th><th>Kilos</th><th>Comentarios</th><th>Contacto</th>        
        </tr>
    </thead>
    <tfoot>
        <tr><th>Cliente</th><th>Variedad</th><th>Clearfield</th><th>Regadio</th><th>Superficie</th><th>Bolsas</th><th>Resiembra</th><th>Bols_Res</th><th>Promocion</th><th>BolsPromc</th><th>Sentimiento</th><th>Kilos</th><th>Comentarios</th><th>Contacto</th>
        </tr>
    </tfoot>
</table>
</div>
</div> </body>

allan · May 2017

Thanks for posting back - great to hear you've got it working now.

Allan

PabloIE · May 2017

It fails when using Responsive Extension.
I've debugged it and i think it has to do with DTE DTE_Inline divs dynamically created when you click any checkbox placed on an expanded hidden columns.
I'll be digging on it .

Any ideas?

allan · May 2017

Its probably related to the selectors being used. Could you give me a link to a test page showing the issue so I can take a look?

Allan

PabloIE · May 2017

I found a possible fix :
Using "Renderer" function .

Use of js renderer: $.fn.dataTable.Responsive.renderer.tableAll() shows all the columns as a nested table and works as expected.

Using the function that only shows the hidden columns on a nested table fails .

responsive: {
        details: {
            renderer: function ( api, rowIdx, columns ) {
                var data = $.map( columns, function ( col, i ) {
                    return col.hidden ?
                        '<tr data-dt-row="'+col.rowIndex+'" data-dt-column="'+col.columnIndex+'">'+
                            '<td>'+col.title+':'+'</td> '+
                            '<td>'+col.data+'</td>'+
                        '</tr>' :
                        '';
                } ).join('');
 
                return data ?
                    $('<table/>').append( data ) :
                    false;
            }
        }
    }

I prefer using this second option . I'll keep digging into it and I'll give you feedback.

PabloIE · June 2017

I'm not able to make it work...
I think it's an event listeners bubbling issue, could you guide me on this?

HPB · June 2017

Just a guess, but I think $(this).closest('tr') will select the child row when using responsive, not the parent row that editor expects.

Ugly workaround I used myself for this situation is something like this

            var row;
            if ($(this).parent().attr('role') == "row") {
                row = $(this).parent();
            }
            else if ($(this).closest('tr').attr('role') == "row") {
                row = $(this).closest('tr');
            }
            else if ($(this).closest('tr.child').prevAll('tr.parent').first().attr('role') == "row") {
                row = $(this).closest('tr.child').prevAll('tr.parent').first();
            }
            editor
            .edit( row, false )
            .set( 'Promocion' , $(this).prop( 'checked' ) ? 1 : 0 )
            .submit();

PabloIE · June 2017

Thanks so much HPB I'll test it when I'm on the laptop...and of course I'l give you feedback news.

PabloIE · June 2017

HPB your approach doesn't work either. Thanks anyway

Multiple checkbox columns

Multiple checkbox columns

Answers

Howdy, Stranger!

Categories

DataTables

Multiple checkbox columns

Multiple checkbox columns

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables