Answers

• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  August 2019

  row.add() does not cause an ajax request. Likely you added draw() and have server side processing enabled. The draw() with server side processing would send an ajax request to fetch the current data. Or you could have some event occurring that is sending the ajax request.

  Please post your Datatables code so e can see what you are doing.

  Kevin
• jason.sweet Posts: 4Questions: 1Answers: 0

  August 2019

  Sorry. I do have a call to draw(). My understanding is that the new row will not be seen until draw is called.

          var table = $('#table').DataTable();
          table.settings().ajax
          table.row.add({'field1': 'x', 'field2': 'x', 'field3': 'x'}).draw();
  

  What I would like to accomplish is to add some rows to the table. And then make the ajax call when the user presses a Save button. So I guess i need to prevent the ajax call for that draw.
• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  August 2019

  var table = $('#table').DataTable();

  Is this your Datatables init code? If not please post the init code.

  Just trying to get a full picture of what you have to offer suggestions.

  Kevin
• jason.sweet Posts: 4Questions: 1Answers: 0

  August 2019

  OK, Took some digging, but I found it. We build this dynamically in server side code.

  var tableOptions = $.extend({}, {
                  processing: true,
      serverSide: true,
      searching: true,
      paging: true,
      ajax: {
          type: "POST",
          url: $table.data("url") || window.location.href,
          error: function (xhr) {
              if (xhr.status === 401) {
                  window.location.assign(window.location.href);
              }
              else if (xhr.status !== 0){
                  alert("Ajax request failed.");
              }
          },
      },
                  lengthMenu: [25,50,100,250,500],
      columnDefs: [
          {className: "cellEditable", "targets": "column-editable"},
          {className: "centerText", "targets": "align-center"},
          {className: "rightText", "targets": "align-right"},
          {sortable: false, "targets": "no-sort"},
          {searchable: false, "targets": "no-search"},
          {visible: false, "targets": "no-show"}
      ],
                  columns: [{"data":"tier","name":"tier","visible":true,"defaultContent":null},{"data":"allow_payroll","name":"allow_payroll","visible":true,"defaultContent":null},{"data":"maxamount","name":"maxamount","visible":true,"defaultContent":null},{"data":"edit","name":"edit","visible":true,"defaultContent":null},{"data":"delete","name":"delete","visible":true,"defaultContent":null}],
                  order: [],
      language: {
          search: "",
          lengthMenu: "_MENU_"
      },
      stateSave: true,
                  dom: "<'row table-top'<'col-sm-3 first leftText'f><'col-sm-6 centerText'p><'col-sm-3 last rightText'l>>r<'overflow-table't><'row table-bottom'<'col-sm-3 first leftText'i><'col-sm-6 centerText'p><'col-sm-3 last rightText go-to-page'>>"
  }, {"paging":false});
  
  $table.trigger('settings.dt', [tableOptions]);
  
• kthorngren Posts: 21,343Questions: 26Answers: 4,954

  August 2019 Answer ✓

  Yep, you are doing server side processing. So each draw() will send an ajax request to the server.

  What I would like to accomplish is to add some rows to the table. And then make the ajax call when the user presses a Save button.

  row.add() is essentially a client side API. Once you use '-api draw()` the client side is updated with the new page from the server side processing request. The row added is no longer in the client and unless you submitted it to the server it will be gone.

  One option may be to use a client side Datatable that holds temporary data that is visible to the user. Once the user has added all the rows and verifies the temp table they can submit the rows from the temp table.

  Another would be to have the server calculate the page that the new data is on and return with the page number which you can use the page() API to request the page to see the newly added row. It would require sending extra parameters via the ajax data parameter to provide page length info to the server.

  Just a couple options off the top of my head. Not really sure what your process is or what you really need to accomplish.

  Kevin
• jason.sweet Posts: 4Questions: 1Answers: 0

  August 2019

  OK. That is good information. We have an internal API that wraps the datatables stuff. It seems like the best approach is to have the server-side code has to keep track of the new "unsaved" data. I just need to work out how to make that happen. You have been very helpful. Thank you very much.