Many checkbox on a row

Many checkbox on a row

ANTOINEANTOINE Posts: 8Questions: 1Answers: 0

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.

Answers

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Thanks,
    Allan

  • ANTOINEANTOINE Posts: 8Questions: 1Answers: 0

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • ANTOINEANTOINE Posts: 8Questions: 1Answers: 0
    edited March 2015

    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));
    
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • ANTOINEANTOINE Posts: 8Questions: 1Answers: 0

    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

  • ANTOINEANTOINE Posts: 8Questions: 1Answers: 0

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • ANTOINEANTOINE Posts: 8Questions: 1Answers: 0
    edited March 2015

    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

  • ANTOINEANTOINE Posts: 8Questions: 1Answers: 0

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • ANTOINEANTOINE Posts: 8Questions: 1Answers: 0

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

This discussion has been closed.