Answers

• dennisgaudenzi Posts: 5Questions: 1Answers: 0

  December 2020

  It looks like the issue was since I had serverSide: true on. UGHHHHH.

  https://datatables.net/examples/server_side/simple.html

  The next question related - can you use this with file upload? I really need it since I want to keep things on my server instead of clientside for larger data sets.

  Thanks!
• allan Posts: 61,723Questions: 1Answers: 10,108 Site admin

  December 2020

  Good to hear you got that sorted out!

  Yes, you can use file upload and server-side processing. There is an example of server-side processing with Editor here and all three of our server-side libraries support server-side processing.

  Allan
• dennisgaudenzi Posts: 5Questions: 1Answers: 0

  December 2020 edited December 2020

  The issue seems to be that extra GET that is sent to the browser after the POST from the save of data and push of the file back to the datatable. That seems to be where the image does not save inline like it does without server side. you can even see the second POST here as well after saving on network tab: https://editor.datatables.net/examples/simple/server-side-processing.html

  But, yours saves and mine does not for some reason...
• dennisgaudenzi Posts: 5Questions: 1Answers: 0

  December 2020

  Here is the full script, does it have something to do with the way it renders with serverside on?

          var editor; // use a global for the submit and return data rendering in the examples
  
          $(document).ready(function() {
              editor = new $.fn.dataTable.Editor({
                  ajax: "/SAVE-URL",
                  table: "#example",
                  fields: [{
                          label: "First name:",
                          name: "first_name"
                  }, {
                          label: "Last name:",
                          name: "last_name"
                  }, {
                          label: "Phone #:",
                          name: "phone"
                  }, {
                          label: "City:",
                          name: "city"
                  }, {
                          label: "Image:",
                          name: "image",
                          type: "upload",
                          display: function ( file_id ) {
                              return '<img src="'+editor.file( 'files', file_id ).web_path+'"/>';
                          },
                          clearText: "Clear",
                          noImageText: 'No image'
                  }]
              });
  
              // Edit record
              $('#example').on('click', 'a.editor_edit', function (e) {
                  e.preventDefault();
                  editor.edit( $(this).closest('tr'), {
                      title: 'Edit record',
                      buttons: 'Update'
                  });
              });
  
              var table = $('#example').DataTable( {
                  dom : '<"#add">frtip', //Bfrtip
                  order: [[2, 'asc']],
                  rowGroup: {
                      dataSrc: "phone"
                  },
                  processing: true,
                  serverSide: true,
                  ajax: "/DATA-URL",
                  columnDefs: [
                      {
                          targets:2, 
                          visible:false
                      }
                  ],
                  columns: [
                      { data: "first_name" },
                      { data: "last_name" },
                      { data: "phone" },
                      { data: "city" },
                      {
                          data: "image",
                          render: function ( file_id ) {
                              return file_id ?
                                  '<a target="_blank" href="https://www.google.com"><img src="'+editor.file( 'files', file_id ).web_path+'" width="40"/></a>' :
                                  null;
                                  //https://editor.datatables.net/examples/advanced/upload.html
                          },
                          defaultContent: "No image",
                          title: "Image"
                      }
                      ,{
                           data: null,
                           className: "center",
                           defaultContent: '<a href="" class="editor_edit">Edit</a>'
                           //https://editor.datatables.net/examples/simple/inTableControls.html
                      }
                  ]
                  /*,
                  select: true,
                  buttons: [
                      { extend: "edit",   editor: editor }
                  ]*/
              }); 
  
              //$('<label/>').text('my dropdown').appendTo('#add')
              $select = $('<select/>').appendTo('#add')
              $('<option/>').val('1').text('option #1').appendTo($select);
              $('<option/>').val('2').text('option #2').appendTo($select);
              $('<option/>').val('3').text('option #3').appendTo($select);
  
              $("#add select").addClass("p-2");
  
          });
  
• allan Posts: 61,723Questions: 1Answers: 10,108 Site admin

  December 2020

  The second post is because Editor will call draw() when the edit is complete (to update the DataTable). When using server-side processing that means it will perform a request to the server to get the new data.

  What the problem might be is that your DataTable isn't configured to send a POST:

  ajax: "/DATA-URL",
  

  will do a GET by default. You need to use:

  ajax: {
    url: '/DATA-URL',
    type: 'post'
  }
  

  If that isn't working for you, can you link to a page showing the issue so I can help to debug it please?

  Thanks,
  Allan
• dennisgaudenzi Posts: 5Questions: 1Answers: 0

  December 2020

  That did not work, i am going to email you a link Allen. thanks!