Answers

• allan Posts: 61,710Questions: 1Answers: 10,103 Site admin

  January 2017 Answer ✓

  The way to use libraries such as this one (thanks for introducing me to it btw - I've not seen this one before - it looks great!) is to create a field type plug-in for Editor. That basically acts as a bridge between Editor and the external library.

  Using a field type plug-in means you can use the field just like any other in Editor.

  Allan
• kthorngren Posts: 20,300Questions: 26Answers: 4,769

  January 2017

  Great, get to learn something new!

  Below is my working code. Please let me know if you see anything that should be changed or improved. My HTML and JS skills make me a dangerous dveloper :-) Basically just made checkboxes work with the plugin then added the Bootstrap Toggle init function to the set method.

  // toggle field type plug-in code
  (function ($, DataTable) {
   
  if ( ! DataTable.ext.editorFields ) {
      DataTable.ext.editorFields = {};
  }
   
  var Editor = DataTable.Editor;
  var _fieldTypes = DataTable.ext.editorFields;
   
  _fieldTypes.toggle = {
      create: function ( conf ) {
          var that = this;
   
          conf._enabled = true;
          // Create the elements to use for the input
          conf._input = $('<input/>').attr($.extend({
              type: 'checkbox',
              }, conf.attr || {}));
          return conf._input;
      },
   
      get: function ( conf ) {
          return $(conf._input).prop( 'checked' ) ? 1 : 0;
      },
   
      set: function ( conf, val ) {
          $(conf._input).prop( 'checked', val == 1 )
          $(conf._input).bootstrapToggle({size: 'mini'});
      },
   
      enable: function ( conf ) {
          conf._enabled = true;
          $(conf._input).removeClass( 'disabled' );
      },
   
      disable: function ( conf ) {
          conf._enabled = false;
          $(conf._input).addClass( 'disabled' );
      }
  };
   
  })(jQuery, jQuery.fn.dataTable);
  

  Kevin
• allan Posts: 61,710Questions: 1Answers: 10,103 Site admin

  January 2017

  Very nice - thanks for sharing your code with us!

  Allan
• kthorngren Posts: 20,300Questions: 26Answers: 4,769

  March 2017 edited March 2017

  Just thought I would provide an update. I found the above implementation caused the Editor to submit changes when filtering or doing anything that caused the rowCallaback to execute. The .change() in the rowCallback cause the bootstrap-toggle plugin to invoke a change causing the unexpected Editor updates.

  The following changes fixed the issue and actually made the code a bit simpler. Here are the code snippets:

  The Editor Field same config as a checkbox but type is toggle:

            fields: [
              { label: 'Data Collection:',  name: 'coll.enabled',
                type: 'toggle', separator: '|',
                options: [
                        { label: '', value: 1 }
                ]
              }
          ]
  

  I swapped the two lines in the set: function and added the .change() to the checkbox update so the Editor will show the toggle in the proper state:

      set: function ( conf, val ) {
          $(conf._input).bootstrapToggle({size: 'mini'});
          $(conf._input).prop( 'checked', val == 1 ).change();
      },
  

  I removed the createdCell in columnDefs and changed the rowCallback to this:

          rowCallback: function ( row, data ) {
              $('input.editor-active', row).prop( 'checked', data.coll.enabled == 1 ).bootstrapToggle({size: 'mini'});
          },
  

  And removed the $(this).bootstrapToggle({size: 'mini'}); from the change event handler which now looks like this:

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

  Everything seems to work properly now. Essentially its the same code as the Always Shown Checkbox example with the addition of the toggle plugin, the .bootstrapToggle({size: 'mini'}) on the end of the line in rowCallback and changing the field type to toggle in the Editor.

  Kevin
• Igorski88 Posts: 25Questions: 8Answers: 0

  May 2019 edited May 2019

  Did you ever get this to work? Can you show us the final code? My BootstrapToggle btns don't show up. They stay as checkboxes. Also, do I need the editor licence to get this to work?
• kthorngren Posts: 20,300Questions: 26Answers: 4,769

  May 2019

  Here is an example with just Datatables.
  http://live.datatables.net/pesacoxe/1/edit

  The key is to use rowCallback to apply the Bootstrap Toggle.

  The Field Type plugin code above is only needed if you are using Editor.

  If you are unable to get it to work please post a link to your page or a test case replicating the issue.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• Igorski88 Posts: 25Questions: 8Answers: 0

  May 2019

  Worked like a charm! The Datatable community is lucky to have you. Thank you kthorngren!