Answers

• Lucho_1312 Posts: 30Questions: 9Answers: 0

  September 2015

  That's because my REST server needs the data in JSON format, not as parameters.
• allan Posts: 63,356Questions: 1Answers: 10,447 Site admin

  September 2015 Answer ✓

  Yes, simply use the extra parameters you need in the REST objects - e.g.:

          create: {
              type: 'POST',
              url:  '../php/rest/create.php',
              contentType: 'application/json',
              data: function ( d ) {
                  return JSON.stringify( d );
              }
          },
  

  Allan
• Lucho_1312 Posts: 30Questions: 9Answers: 0

  September 2015

  Thanks!
  I found something like that in a post here, so I made this (in case someone else needs something like me):

      var _overrideEditorAjax = function(data) {
          var ajax = {};
  
          switch (data.editorOverrideAjax) {
              case 'restify':
                  var urls = data.editorRestifyUrls;
                  var ajaxBase = {
                      contentType: 'application/json; charset=utf-8',
                      processData: 'false',
                      dataType: 'json',
                      data: function(d) {
                          return JSON.stringify(d);
                      }
                  };
                  ajax = {
                      create: $.extend(true, {
                          type: 'POST',
                          url: urls.create
                      }, ajaxBase),
                      edit: $.extend(true, {
                          type: 'PUT',
                          url: urls.edit
                      }, ajaxBase),
                      remove: $.extend(true, {
                          type: 'DELETE',
                          url: urls.remove
                      }, ajaxBase)
                  };
                  break;
              default:
                  ajax = data.editorAjax;
                  break;
          }
          return ajax;
      };
  

  Using that, I can set all the table from html attributes (I'm trying to probe that making a jQuery plugin, I can set any dataTables + Editor just using data-* attributes, to make some tests with a NodeJS app)

  So, the way I instance dataTables +editor is this:

  
  <div data-plugin="datatable-editor-plugin" data-load-on-init="true">
  <table 
      class="datatable-editor-plugin-data-table  dataTable" 
      data-order'[[1, "asc"], [2, "asc"]]' 
      data-ajax='{
          "url": "/api/v1/get-data-endpoint", 
          "cache": "false"
      }' 
      data-editor-override-ajax="restify"
      data-editor-restify-urls='{
          "create": "/api/v1/add-data-endpoint",
          "edit": "/api/v1/edit-data-endpoint/_id_",
          "remove": "/api/v1/remove-data-endpoint/_id_"
      }' 
      data-editor-id-src="_id">
      
      <thead>
          <tr>
              <th data-data="_id" data-visible="false">_id</th>
              <th data-data="name" data-class-name="custom-class-name"
              <th data-data="slug">Slug</th>
              <th data-data="enabled" data-type="checkbox">Active</th>
          </tr>
      </thead>
      <tbody>
      </tbody>
  </table>
  </div>
  

  and then using a plugin, I set everything in a generic way:

  [... some code to initialize the jQuery plugin ...]
      var dataTableSelector = '.datatable-editor-plugin-data-table';
      var DataTableCrud = function(element, options) {
          this.$element = $(element);
          this.options = options;
  
          // If the loadOnInit param exists and is enabled, load the dataTable
          if (this.options.loadOnInit) {
              var dataTable = this.$element.find(dataTableSelector);
  
              this.options.editor = new $.fn.dataTable.Editor({
                  ajax: _overrideEditorAjax(dataTable.data()),
                  table: dataTable,
                  idSrc: dataTable.data().editorIdSrc,
                  fields: _generateEditorFields(dataTable),
                  formOptions: {
                      inline: {
                          submitOnBlur: true
                      }
                  }
              });
  
              this.options.editor
                  .on('preSubmit', _modelPreSubmitData)
                  .on('postSubmit', _modelPostSubmitData);
  
  
              _loadTableData(dataTable, options);
  
          }
  
  
          // Example of Binding element events
          this.$element
              .on(click, '.rd-toggle-extra-columns', $.proxy(this.toggleExtraColumns, this));
      };
  

  /**
   * Generates the array of fields needed to initialize a Editor in a dataTable
   * @param  {jQuery selector} dataTable      DataTable selector
   * @return {Array}                          Array with the fields needed in the Editors initialization
   */
  var _generateEditorFields = function(dataTable) {
  
      var _prepareField = function(th) {
          var columnData = $(th).data();
          var field = {
              // Uses the th data-label value. If it doesn't exist, uses the HTML inside
              label: columnData.label || $(th).html(),
              data: columnData.data,
              // Uses the th data-name value. If it doesn't exist, uses the data-data value
              name: columnData.name || columnData.data
          };
  
          switch (columnData.type) {
              case 'checkbox':
                  field = $.extend(true, field, {
                      type: 'checkbox',
                      separator: '|',
                      options: [{
                          label: '',
                          value: 1
                      }]
                  });
                  break;
              // I can add more custom types here! 
          }
          return field;
      };
  
      var fields = [];
      dataTable.find('thead th').each(function(index, th) {
  
          fields.push(_prepareField(th));
      });
      return fields;
  };