Select multiple check boxes

kenrights

Hi Guys,
I'm looking to implement multiple check boxes and then edit. It seems to get gummed up on this code which is currently commented out in my live.datatables.net:

{
    data:   "active",
         render: function ( data, type, row ) {
             if ( type === 'display' ) {
                 return '<input type="checkbox" class="editor-active">';
             }
             return data;
         },
         className: "dt-body-center"
},

I'm thinking the issue is around class="editor-active" or className: "dt-body-center" but, I'm having trouble finding documentation that I can comprehend on what these properties do. My console:

Any suggestions on how I can get those check boxes to show up?

Thank you,

allan

Are you trying to use the always shown example? The editor-active class is just used to allow easy targeting of event handlers to handle the change event.

That stuff isn't needed to use checkboxes in Editor's main form. That's just for the always shown example.

Allan

kenrights

Yes, I'm trying to use the always shown example. Sorry I messed up on the link when I started this thread. I liked this example because I'm designing for mobile and I noticed that I can check off multiple rows with my finger before submitting (submit to be built).

When you wrote above that the editor-active class 'stuff' isn't needed to use checkboxes in Editor's main form, I'm not clear on that. In pouring over the Always Shown example, I came to think that I had to add these FIVE SECTIONS to my js:

ONE: //part of fields property and needed to insert the check box column

{
   label:     "Active:",
   name:      "active",
   type:      "checkbox",
   separator: "|", // Editor will implode the values of the array into a string. It will also read multiple values from a similarly formatted string
   options:   [
       { label: '', value: 1 }
   ]
 },

TWO (the section that appears to be causing the break):

{
   data: "active",
   render: function ( data, type, row ) {
     if ( type === 'display' ) {
         return '<input type="checkbox" class="editor-active">';
     }
     return data;
   },
   className: "dt-body-center"  // center align the checkbox in the column https://datatables.net/blog/2014-09-09
}

THREE:

select: {
      style: 'os',
      selector: 'td:not(:first-child)' // no row selection on the column because it is a check box
    },

FOUR:

rowCallback: function ( row, data ) {  // https://datatables.net/reference/option/rowCallback & https://datatables.net/blog/2014-09-09
        // Set the checked state of the checkbox in the table
  $('input.editor-active', row).prop( 'checked', data.active == 1 );
}

FIVE: I wasn't clear on what this did.

$('#table_id').on( 'change', 'input.editor-active', function () {
    editor
      .edit( $(this).closest('tr'), false )  //closest(): For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree
      .set( 'active', $(this).prop( 'checked' ) ? 1 : 0 )
      .submit();
  });

The editor-active syntax is located in sections TWO, FOUR and FIVE above.

BTW: The "Always Shown Checkbox" page says at the bottom that I must load these modules:

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
    

I tried loading the above and it didn't help so I removed them as they might be already included in the 16 js files that are already being loaded.

Finally, I scrapped the above and tried to go with a simpler example just to see if I could get the check boxes to appear on each row. This also was a failure. The console might be of help but, not to me.

kenrights

going in a different direction. this can be closed.