Answers

• lincolncbennett Posts: 25Questions: 11Answers: 1

  May 2015

  problem solved
• allan Posts: 63,455Questions: 1Answers: 10,465 Site admin

  May 2015

  Hi,

  Sorry I missed this at the time. What was your resolution in the end?

  Allan
• lincolncbennett Posts: 25Questions: 11Answers: 1

  May 2015

  I have a table at the moment which uses the Custom display controller for editing basic client info and I have successfully added the upload feature to add a PDF file containing client info. In each table row I also have 7 inline active check boxes, so as to monitor progression tasks required for each client. I have only just added the upload plugin so am going to have a play around and then post the code if I cant get to work correctly. Thanks Allan for this awesome plugin.

  below shows the changes I made to the code above and then it worked just fine.

   var editor;
  
  $(document).ready(function() {
      var editor = new $.fn.dataTable.Editor( {
          ajax: "examples/php/staff2.php",
          table: "#staff",
          fields: [
              {
                  label: "name",
                  name: "staff.name"
              },
              {
                  label: "title",
                  name: "staff.title"
              },
              
              {
                  label: "Info:",
                  name: "staff.image",
                  type: "upload",
                   display: function ( val, row ) {
           return val && row.image.webPath ?
               '<img src="'+row.image.webPath+'"/>' :
               'No image';
       },
          
              },
          ]
      } );
  
      $('#staff').DataTable( {
          dom: "Tfrtip",
          ajax: "examples/php/staff2.php",
          columns: [
              {
                  data: "staff.name"
              },
              {
                  data: "staff.title"
              },
              {
               data: "image",
             defaultContent: "No image",
             render: function ( d ) {
                 return d.webPath ?
                     '<img src="'+d.webPath+'"/>' :
                     null;
             }}
          ],
          tableTools: {
              sRowSelect: "os",
              aButtons: [
                  { sExtends: "editor_create", editor: editor },
                  { sExtends: "editor_edit",   editor: editor },
                  { sExtends: "editor_remove", editor: editor }
              ]
          }
      } );
  } );
  
  

  <?php
  
  /*
   * Editor server script for DB table staff
   * Created by http://editor.datatables.net/generator
   */
  
  // DataTables PHP library and database connection
  include( "../../php/DataTables.php" );
  
  // Alias Editor classes so they are easy to use
  use
      DataTables\Editor,
      DataTables\Editor\Field,
      DataTables\Editor\Format,
      DataTables\Editor\Join,
      DataTables\Editor\Upload,
      DataTables\Editor\Validate;
  
  
  // Build our Editor instance and process the data coming from _POST
  $data = Editor::inst( $db, 'staff' , 'id')
      ->fields(
          Field::inst( 'staff.name' ),
          Field::inst( 'staff.title' ),
          Field::inst( 'staff.info' ),
          Field::inst( 'staff.image' )
  
      ->upload(
          Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__NAME__' )
              ->db( 'image', 'id', array(
                  'fileName' => Upload::DB_FILE_NAME,
                  'fileSize' => Upload::DB_FILE_SIZE,
                  'webPath' => Upload::DB_WEB_PATH,
                  'systemPath'  => Upload::DB_SYSTEM_PATH
              ) )
      ),
  
         Field::inst( 'image.fileName' ),
         Field::inst( 'image.webPath' )
  
      )
      ->leftJoin( 'image', 'staff.image', '=', 'image.id' )
      ->process( $_POST )
      ->data();
      echo json_encode( $data );
  
• allan Posts: 63,455Questions: 1Answers: 10,465 Site admin

  May 2015

  Sounds good - thanks for posting back :-)

  Allan
• lincolncbennett Posts: 25Questions: 11Answers: 1

  June 2015

  Hi Allan further to my second post, I seem to be having some issues.
  I had 2 inline active checkboxes and was using the Custom display controller for editing. Since adding the Upload plugin, with a link in each row to the uploaded file, I cannot see the checkboxes ticked in the table but see them checked when opening the child editor. The only other change was defining the database table as required for upload left join, in php. Sorry the code below is long. Any help would be appreciated.

  var editor;
  
  (function () {
  
  var Editor = $.fn.dataTable.Editor;
  Editor.display.details = $.extend( true, {}, Editor.models.displayController, {
      "init": function ( editor ) {
          // No initialisation needed - we will be using DataTables' API to display items
          return Editor.display.details;
      },
   
      "open": function ( editor, append, callback ) {
          var table = $(editor.s.table).DataTable();
          var row = editor.s.modifier;
   
          // Close any rows which are already open
          Editor.display.details.close( editor );
   
          // Open the child row on the DataTable
          table
              .row( row )
              .child( append )
              .show();
  
          $( table.row( row ).node() ).addClass( 'shown' );
  
          if ( callback ) {
              callback();
          }
      },
   
      "close": function ( editor, callback ) {
          var table = $(editor.s.table).DataTable();
  
          table.rows().every( function () {
              if ( this.child.isShown() ) {
                  this.child.hide();
                  $( this.node() ).removeClass( 'shown' );
              }
          } );
   
          if ( callback ) {
              callback();
          }
      }
  } );
  
  } )();
  
  $(document).ready(function() {
       
      editor = new $.fn.dataTable.Editor( {
          ajax: "examples/php/staff3.php",
          table: "#example",
          display: "details",
          fields:                          
                [ {
                  label:     "Active:",
                  name:      "bdm.active",
                  type:      "checkbox",
                  separator: "|",
                  options:   [
                      { label: '', value: 1 }
                  ]
               }, {
                  label:     "Active_2:",
                  name:      "bdm.active_2",
                  type:      "checkbox",
                  separator: "|",
                  options:   [
                      { label: '', value: 1 }
                  ]
              }, {
                  
                  label: "First name:",
                  name: "bdm.first_name"
              }, {
                  label: "Last name:",
                  name: "bdm.last_name",
                       
                  
              }, {
                  label: "Info:",
                  name: "bdm.image",
                  type: "upload",
                   display: function ( val, row ) {
           return val && row.image.webPath ?
               '<img src="'+row.image.webPath+'"/>' :
               'No image';
       },
          
              },
          ]
          
          
      } );
              
      var table = $('#example').DataTable( { 
      
      
          dom: "lfrtip",
          ajax: "examples/php/staff3.php",
          
          
          columns: [
           {
             data: "null, defaultContent: ''"
             
             
            },
          
              {
                  className:      'details-control',
                  orderable:      false,
                  data:           null,
                  defaultContent: ''
                  
                  
              },
              {
                   data: "bdm.Ref2"  
              },
              {
                   data: "bdm.Reference"  
              },
              {
                   data: "bdm.Year"  
              },
              {
                   data: "bdm.Loc"  
              }, 
              { data: null, render: function ( data, type, row ) {
                  // Combine the first and last names into a single table field
                  return data.bdm.First_names+' '+data.bdm.Last_name;
              } },
              
              
               {
                  data:   "bdm.active",
                  render: function ( data, type, row ) {
                      if ( type === 'display' ) {
                          return '<input type="checkbox" class="editor-bdm.active">';
                      }
                      return data;
                  },
                  className: "dt-body-center"
              },          
          
          {
                  data:   "bdm.active_2",
                  render: function ( data, type, row ) {
                      if ( type === 'display' ) {
                          return '<input type="checkbox" class="editor-bdm.active_2">';
                      }
                      return data;
                  },
                  className: "dt-body-center"
              },
              
              
          ],      
  
  "order": [[1, 'asc']],
   
   "columnDefs": [
              {
              "targets": 0,  
              "data": "bdm.image",
              "render": function ( data, type, row ) {
              return '<a href="../uploads/'+row.bdm.image+'.pdf">file</a>';
              }
              }
              ],
                               
          rowCallback: function ( row, data ) {
              // Set the checked state of the checkbox in the table
              $('input.bdm.active', row).prop( 'checked', data.bdm.active == 1 );
              $('input.bdm.active_2', row).prop( 'checked', data.bdm.active_2 == 1 );
              
              
          }
          
          } )
          
      
      
          
      $('#example').dataTable().yadcf([
      
      {column_number : 5, filter_container_id: "external_filter_container"},
      ]);
                      
      
  $('#example').on( 'change', 'input.bdm.active', function () {
          editor
              .edit( $(this).closest('tr'), false )
              .set( 'input.bdm.active', $(this).prop( 'checked' ) ? 1 : 0 )
              .submit();
   } );   
   $('#example').on( 'change', 'input.bdm.active_2', function () {
          editor
              .edit( $(this).closest('tr'), false )
              .set( 'input.bdm.active_2', $(this).prop( 'checked' ) ? 1 : 0 )
              .submit();
   } );
       
   
      $('#example').on( 'click', 'td.details-control', function () {
          var tr = this.parentNode;
   
          if ( table.row( tr ).child.isShown() ) {
              editor.close();
          }
          else {
              editor.edit(
                  tr,
                  'Edit row',
                  [
                      {
                          "className": "delete",
                          "label": "Delete row",
                          "fn": function () {
                              // Close the edit display and delete the row immediately
                              editor.close();
                              editor.remove( tr, '', null, false );
                              editor.submit();
                          }
                      }, {
                          "label": "Update row",
                          "fn": function () {
                              editor.submit();
                          }
                      }
                  ]
              );
          }
      } );
      
  } );
  
    
      </script>
  

  $data = Editor::inst( $db, 'bdm', 'Ref2' )
      ->fields(
      Field::inst( 'bdm.Ref2' ),
      Field::inst( 'bdm.Reference' ),
      Field::inst( 'bdm.Year' ),
      Field::inst( 'bdm.Loc' ),
          Field::inst( 'bdm.First_names' ),
          Field::inst( 'bdm.Last_name' ),
          Field::inst( 'bdm.image' )
           ->upload(
          Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__ID__.__EXTN__' )
          ->allowedExtensions( array( 'pdf'), "Please upload a pdf file" )
              ->db( 'image', 'id', array(
                  'fileName' => Upload::DB_FILE_NAME,
                  'fileSize' => Upload::DB_FILE_SIZE,
                  'webPath' => Upload::DB_WEB_PATH,
                  'systemPath'  => Upload::DB_SYSTEM_PATH
  
              ) )
      ),
          Field::inst( 'bdm.active' )
              ->setFormatter( function ( $val, $data, $opts ) {
                  return ! $val ? 0 : 1;
              } 
              ),  
              Field::inst( 'bdm.active_2' )
              ->setFormatter( function ( $val, $data, $opts ) {
                  return ! $val ? 0 : 1;
              } 
              ),      
  
         Field::inst( 'image.fileName' ),
         Field::inst( 'image.webPath' )
  
         )
  
      ->leftJoin( 'image', 'bdm.image', '=', 'image.id' )
      ->process( $_POST )
      ->data();
      echo json_encode( $data );
  
  
• allan Posts: 63,455Questions: 1Answers: 10,465 Site admin

  June 2015

  I don't immediately see anything wrong with the above code. Are you able to give me a link to the page or use the DataTables debugger so I can see what is happening?

  Thanks,
  Allan
• lincolncbennett Posts: 25Questions: 11Answers: 1

  June 2015

  ofuhoy
• lincolncbennett Posts: 25Questions: 11Answers: 1

  June 2015 Answer ✓

  Found the fault,the issue was in defining the fields. snippets below show changes made to table code. Server script was fine.

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

  rowCallback: function ( row, data ) {
              // Set the checked state of the checkbox in the table
              $('input.editor-active', row).prop( 'checked', data.bdm.active == 1 );
              $('input.editor-active_2', row).prop( 'checked', data.bdm.active_2 == 1 );
  
  etc.........
  

  $('#example').on( 'change', 'input.editor-active', function () {
          editor
              .edit( $(this).closest('tr'), false )
              .set( 'bdm.active', $(this).prop( 'checked' ) ? 1 : 0 )
              .submit();
   } );   
   $('#example').on( 'change', 'input.editor-active_2', function () {
          editor
              .edit( $(this).closest('tr'), false )
              .set( 'bdm.active_2', $(this).prop( 'checked' ) ? 1 : 0 )
              .submit();
  etc...........
  
• allan Posts: 63,455Questions: 1Answers: 10,465 Site admin

  June 2015

  Good to hear you got it sorted!

  Allan