Many checkbox on a row

ANTOINE

Hi,

I'm french sory for my english.
I use Datatable Editor, i have read the example for use One checkbox (active).
But i want use many checkbox on my row. The JS read the row and if (data.active == 1) all the checkbox are checked.
I want separate data .

have you examples for datatble editor with 2 checkbox in the same row. I need only JS , the php/html is OK.

thanks a lot.

allan

Is it this example you are referring to, or a different one?

Thanks,
Allan

ANTOINE

Yes it is this example.
i have tried to put many checkbox in the same line but without success .

when i checked one checkbow, all the line is checked.

allan

Can you show me the code that you used please? I presume that you have duplicated (and then modified the duplicated code to be unique) for the drawing of the checkboxes and the event handlers?

Allan

ANTOINE

ahah, yes i'm not amazing in javascript.

my part of html ( i show only interessant part)

<th class="bleu">Diel</th>
<th class="bleu">PCB/PCT</th>

My part of php :

    Field::inst( 'diel' )
         ->setFormatter( function ( $val, $data, $opts ) {
                return ! $val ? 0 : 1;
            } ),
        Field::inst( 'pcb' )
        ->setFormatter( function ( $val, $data, $opts ) {
                return ! $val ? 0 : 1;
            } ),

and finaly my part of JS who is wrong :

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        "ajax": "php/table.suivi.php",
        "table": "#suivi",
        "fields": [
        
         
             {
                "label":     "diel:",
                "name":      "diel",
                "type":      "checkbox",
                "separator": "|",
                "options":   [
                    { "label": '', "value": 1 }

                ]
            },
            {
                "label": "PCB\/PCT",
                "name": "pcb", 
                "type": "checkbox",
                "separator": "|",
               "options":   [
                    { "label": '', "value": 1}
                ]
            }
        ]
        
    } );
// Activate an inline edit on click of a table cell
    $('#suivi').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );
    
    $('#suivi').DataTable( {
        "dom": "Tfrtip",
        "ajax": "php/table.suivi.php",
        "columns": [
        
         { "data": "null", "defaultContent": '', "orderable": false },
         
        
            {
                 
                data:   "diel",
                render: function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return '<input type="checkbox" class="editor-active ">';
                    }
                    return data;
                },
                className: "dt-body-center"
            
            },
            {
                "data": "pcb",
                "render": function ( data, type, row ) {
                    if ( type === 'display' ) {
                        return '<input type="checkbox" class="editor-active ">';
                    }
                    return data;
                }
        ],
        "tableTools": {
            "sRowSelect": "os",
            "aButtons": [
                { "sExtends": "editor_create", "editor": editor },
                { "sExtends": "editor_edit",   "editor": editor },
                { "sExtends": "editor_remove", "editor": editor }
            ]
            
        },
         rowCallback: function ( row, data ) {
            // Set the checked state of the checkbox in the table
        
        
          $('input.editor-active', row).prop( 'checked', data.diel == 1 );
     $('input.editor-active', data).prop( 'checked', data.pcb == 1 );
            
        }
    } );
    
     $('#suivi').on( 'change', 'input.editor-active', function () {
        editor
            .edit( $(this).closest('tr'), false )
            
          
             .set( 'pcb', $(this).prop( 'checked' ) ? 1 : 0 )
              .set( 'diel', $(this).prop( 'checked' ) ? 1 : 0 )
             
            .submit();
    
    } );
} );

}(jQuery));

allan

The problem is with the editor-active class. You need a separate class for each field so they can each be addressed individually.

For example you might have editor-pcb for one of the fields.

Then in the rowCallback you would have:

$('input.editor-pcb', data).prop( 'checked', data.pcb == 1 );

And also an event handler for it:

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

Do the same for the diel field (i.e. have its own class).

Allan

ANTOINE

Okay i try to follow u'r advice, yesterday i have tried to modify class for each field, and i have replace row by data, but i have forgotten to modify the event handler.

I hold you aware of Advanced emon

ANTOINE

Great ! its ok ( i have modify u'r code)

$('input.editor-pcb', data).prop( 'checked', data.pcb == 1 );

=>

$('input.editor-pcb', row).prop( 'checked', data.pcb == 1 );

I'm sory i'm confused whith active class, in my head its just for "enabled the line checkbox"

Thanks a lot, amazing plugin, amazing support ,and very quickly .
Have a good day Allan.

allan

Good to hear you've got it working now :-)

Allan

ANTOINE

Hum last question, when i check ( the post data is submit) but when i dechecked just after check , no data submit. i'm obliged to checked in the other line, for that.

I use Google Chrome for my tests

ANTOINE

i have found the problem.

editor-inline, and editor with checkbox dont run, we cant check/decheck . So i have add

// Activate an inline edit on click of a table cell
$('#suivi').on( 'click', 'tbody td:not(:first-child,"editor-diel","editor-pcb","editor-pack1","editor-hydr","editor-gd","editor-tf","editor-tgd") ', function (e) {
editor.inline( this );
} );

and now its perfect.

allan

Can you link me to the page you are working on so I can take a look?

Is an Ajax request made when you uncheck the box?Remember that unchecked === no data for checkboxes.

Allan

ANTOINE

When i check a checkbox , then tried to uncheck, no ajax request transmited .
I'm obliged for cast the ajax request , to click in other lines, then uncheck after my checkbox .

When i have desactivate editor-inline , all fine .

So i have add in the td:not my classe of my cells who contains checkbox.

I have no links for u . But i can send by mails folders or shelters in the cloud.

allan

Yes please, can you reply to my e-mail from earlier today so I can take a look at your very latest code to see what is happening.

Thanks,
Allan