title: How to load json data to DataTable with editable rows?
body: <p>Guys need your expert advise,
  I was following this examples on using datatable plugin and was just wondering if its possible to populate a table with actions to edit rows using ajax?</p>
  
  <p>the code I've got so far is this. this code successfully creates the input elements and save links for the datatable but I'm not sure where to put the ajax loading function.</p>
  
  <pre><code>(function( $ ) {
  
  'use strict';
  
  var EditableTable = {
  
      options: {
          addButton: '#addToTable',
          table: '#branches-editable',
          dialog: {
              wrapper: '#dialog',
              cancelButton: '#dialogCancel',
              confirmButton: '#dialogConfirm',
          }
      },
  
      initialize: function() {
          this
              .setVars()
              .build()
              .loadData()
              .events();
      },
  
      setVars: function() {
          this.$table             = $( this.options.table );
          this.$addButton         = $( this.options.addButton );
  
          // dialog
          this.dialog             = {};
          this.dialog.$wrapper    = $( this.options.dialog.wrapper );
          this.dialog.$cancel     = $( this.options.dialog.cancelButton );
          this.dialog.$confirm    = $( this.options.dialog.confirmButton );
  
          return this;
      },
  
      build: function() {
          this.datatable = this.$table.DataTable({
              aoColumns: [
                  null,
                  null,
                  null,
                  null,
                  { "bSortable": false }
              ]
          });
  
          window.dt = this.datatable;
          return this;
      },
  
      // Trying to load my json data here but getting an error saying
      // DataTables warning: table id=branches-editable - 
      // Cannot reinitialise DataTable. For more information about this error, 
      // please see http://datatables.net/tn/3
      loadData: function() {
          this.datatable = this.$table.DataTable({
              bProcessing: true,
              sAjaxSource: this.$table.data('url')
          });
      },
  
      events: function() {
          var _self = this;
  
          this.$table
              .on('click', 'a.save-row', function( e ) {
                  e.preventDefault();
  
                  _self.rowSave( $(this).closest( 'tr' ) );
              })
              .on('click', 'a.cancel-row', function( e ) {
                  e.preventDefault();
  
                  _self.rowCancel( $(this).closest( 'tr' ) );
              })
              .on('click', 'a.edit-row', function( e ) {
                  e.preventDefault();
  
                  _self.rowEdit( $(this).closest( 'tr' ) );
              })
              .on( 'click', 'a.remove-row', function( e ) {
                  e.preventDefault();
  
                  var $row = $(this).closest( 'tr' );
  
                  $.magnificPopup.open({
                      items: {
                          src: _self.options.dialog.wrapper,
                          type: 'inline'
                      },
                      preloader: false,
                      modal: true,
                      callbacks: {
                          change: function() {
                              _self.dialog.$confirm.on( 'click', function( e ) {
                                  e.preventDefault();
  
                                  _self.rowRemove( $row );
                                  $.magnificPopup.close();
                              });
                          },
                          close: function() {
                              _self.dialog.$confirm.off( 'click' );
                          }
                      }
                  });
              });
  
          this.$addButton.on( 'click', function(e) {
              e.preventDefault();
  
              _self.rowAdd();
          });
  
          this.dialog.$cancel.on( 'click', function( e ) {
              e.preventDefault();
              $.magnificPopup.close();
          });
  
          return this;
      },
  
      // ==========================================================================================
      // ROW FUNCTIONS
      // ==========================================================================================
      rowAdd: function() {
          this.$addButton.attr({ 'disabled': 'disabled' });
  
          var actions,
              data,
              $row;
  
          actions = [
              '&lt;a href="#" class="hidden on-editing save-row"&gt;&lt;i class="fa fa-save"&gt;&lt;/i&gt;&lt;/a&gt;',
              '&lt;a href="#" class="hidden on-editing cancel-row"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/a&gt;',
              '&lt;a href="#" class="on-default edit-row"&gt;&lt;i class="fa fa-pencil"&gt;&lt;/i&gt;&lt;/a&gt;',
              '&lt;a href="#" class="on-default remove-row"&gt;&lt;i class="fa fa-trash-o"&gt;&lt;/i&gt;&lt;/a&gt;'
          ].join(' ');
  
          data = this.datatable.row.add([ '', '', '', '', actions ]);
          $row = this.datatable.row( data[0] ).nodes().to$();
  
          $row
              .addClass( 'adding' )
              .find( 'td:last' )
              .addClass( 'actions' );
  
          this.rowEdit( $row );
  
          this.datatable.order([0,'asc']).draw(); // always show fields
      },
  
      rowCancel: function( $row ) {
          var _self = this,
              $actions,
              i,
              data;
  
          if ( $row.hasClass('adding') ) {
              this.rowRemove( $row );
          } else {
  
              data = this.datatable.row( $row.get(0) ).data();
              this.datatable.row( $row.get(0) ).data( data );
  
              $actions = $row.find('td.actions');
              if ( $actions.get(0) ) {
                  this.rowSetActionsDefault( $row );
              }
  
              this.datatable.draw();
          }
      },
  
      rowEdit: function( $row ) {
          var _self = this,
              data;
  
          data = this.datatable.row( $row.get(0) ).data();
  
          $row.children( 'td' ).each(function( i ) {
              var $this = $( this );
  
              if ( $this.hasClass('actions') ) {
                  _self.rowSetActionsEditing( $row );
              } else {
                  $this.html( '&lt;input type="text" class="form-control input-block" value="' + data[i] + '"/&gt;' );
              }
          });
      },
  
      rowSave: function( $row ) {
          var _self     = this,
              $actions,
              values    = [];
  
          if ( $row.hasClass( 'adding' ) ) {
              this.$addButton.removeAttr( 'disabled' );
              $row.removeClass( 'adding' );
          }
  
          values = $row.find('td').map(function() {
              var $this = $(this);
  
              if ( $this.hasClass('actions') ) {
                  _self.rowSetActionsDefault( $row );
                  return _self.datatable.cell( this ).data();
              } else {
                  return $.trim( $this.find('input').val() );
              }
          });
  
          this.datatable.row( $row.get(0) ).data( values );
  
          $actions = $row.find('td.actions');
          if ( $actions.get(0) ) {
              this.rowSetActionsDefault( $row );
          }
  
          this.datatable.draw();
      },
  
      rowRemove: function( $row ) {
          if ( $row.hasClass('adding') ) {
              this.$addButton.removeAttr( 'disabled' );
          }
  
          this.datatable.row( $row.get(0) ).remove().draw();
      },
  
      rowSetActionsEditing: function( $row ) {
          $row.find( '.on-editing' ).removeClass( 'hidden' );
          $row.find( '.on-default' ).addClass( 'hidden' );
      },
  
      rowSetActionsDefault: function( $row ) {
          $row.find( '.on-editing' ).addClass( 'hidden' );
          $row.find( '.on-default' ).removeClass( 'hidden' );
      }
  };
  
  $(function() {
      EditableTable.initialize();
  });
  
  }).apply( this, [ jQuery ]);
  </code></pre>