title: How to post Ajax Data to your server to update SharePoint list data
body: <p>I have been working on this DataTable for a while now and have all the functionality I need except for one last thing. Right now my table reads in SharePoint list data from an AJAX &quot;GET&quot; Request, and populates it aswell as organizes it based on parent/child rows.</p>
  <p>The last function I need my DataTable to do is to create a button that allows you to add a new row into the table, which will then auto-categorize it into the correct child row based off of the &quot;Program &amp; Deliverable&quot; categories. After it does that, I want to have the DataTable send the data to the corresponding SharePoint list, would this be done through an AJAX &quot;POST&quot; Request?</p>
  <p>How can I go about achieving this? I am utterly lost at the moment.</p>
  <p>Here is my code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function loadData() { //Initializing the AJAX Request function to load in the external list data from different subsites
      //create an array of urls to run through the ajax request instead of having to do multiple AJAX Requests
      var urls = ["url1","url2","url3","url4","url5","url6","url7","url8"];
         
      for (i=0; i &lt; urls.length; i++) { //for loop to run through the AJAX until all URLs have been reached
        $.ajax({
          url: urls[i],
          'headers': { 'Accept': 'application/json;odata=nometadata' },
          success: function (data) { // success function which will then execute "GETTING" the data to post it to a object array (data.value)
            data = data;
            var table = $('#myTable').DataTable();
            table.rows.add( data.value ).draw();
          }
        }); 
      }
  }
  
  $(document).ready(function() {
      var collapsedGroups = {}; 
      var top = '';
      var parent = '';
      
    var table = $('#myTable').DataTable( {
      "columns": [
        { "data": "Program", visible: false },
        { "data": "Deliverable", visible: false },
        { "data": "To" },
        { "data": "Date" },
        { "data": "Approved" },
        { "data": "Notes" }
      ],
      
      dom: "&lt;'row'&lt;'col-sm-12 col-md-10'f&gt;&lt;'col-sm-12 col-md-2'B&gt;&gt;" +
  "&lt;'row'&lt;'col-sm-12'tr&gt;&gt;" +
  "&lt;'row'&lt;'col-sm-12 col-md-5'i&gt;&lt;'col-sm-12 col-md-7'p&gt;&gt;",
       buttons: [{
        extend: 'collection',
        className: "btn-dark",
        text: 'Export',
        buttons:
        [{
        extend: "excel", className: "btn-dark"
      },
        {
        extend: "pdf", className: "btn-dark"
      },
         {
        extend: "print", className: "btn-dark"   
      },
        ],
      }],
      order: [[0, 'asc'], [1, 'asc'] ],   
      rowGroup: {
              dataSrc: [
              'Program',
              'Deliverable'
              ],
              startRender: function (rows,group,level){
                  var all;
                  if (level === 0) {
                      top = group;
                      all = group;
                  } else if (level === 1) {
                      parent = top + group; 
                      all = parent; 
                      // if parent collapsed, nothing to do
                      if (!collapsedGroups[top]) {
                          return;
                      }                   
                  } else {
                      // if parent collapsed, nothing to do
                      if (!collapsedGroups[parent]) {
                          return;
                      } 
                      all = top + parent + group;
                  }
  
                  var collapsed = !collapsedGroups[all];
                  console.log('collapsed:', collapsed);
                
                rows.nodes().each(function(r) {
                  r.style.display = collapsed ? 'none' : '';
                });
                //Add category name to the &lt;tr&gt;.
                return $('&lt;tr/&gt;')
                  .append('&lt;td colspan="8"&gt;' + group + ' (' + rows.count() + ')&lt;/td&gt;')
                  .attr('data-name', all)
                  .toggleClass('collapsed', collapsed);
                  
              
              }
              
          }
    } );
      
   loadData();
  
   $('#myTable tbody').on('click', 'tr.dtrg-start', function () {
          var name = $(this).data('name');
          collapsedGroups[name] = !collapsedGroups[name];
          table.draw(false);
      }); 
  var table = $('#example').DataTable( {
  
  var urls = ["url1","url2","url3","url4","url5",...];
    
  for (i=0; i &lt; urls.length; i++) {     
    ajax: {
      url: urls[i],
      method: "POST",
      data: function( ) {
        return dataToSend;
      }
    },
    }
  } );
      
  } );
  } );</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.btn-dark {
      color: #fff;
      background-color: #343a40;
      border-color: #343a40;
  }
  div.container {
      min-width: 980px;
      margin: 0 auto;
  }
  .header {
    padding: 10px;
    text-align: center;
  }
  body {
      font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
      margin: 0;
      padding: 0;
      color: #333;
      background-color: #fff;
  }
  div.dt-button-collection {
      position: static;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"/&gt;
  &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"&gt;&lt;/script&gt;
  &lt;script src="https://momentjs.com/downloads/moment.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/buttons/1.6.3/js/buttons.bootstrap4.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;link rel ="stylesheet" href="https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.bootstrap4.min.css"/&gt;
  &lt;link rel ="stylsheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"/&gt;
  &lt;link rel ="stylesheet" href="https://cdn.datatables.net/buttons/1.6.3/css/buttons.bootstrap4.min.css"/&gt;
    &lt;h1&gt;&lt;strong&gt;Deliverables&lt;/strong&gt;&lt;/h1&gt;
    &lt;p&gt;&lt;strong&gt;Click the Program/Deliverable names to Collapse/Expand the rows&lt;/strong&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class ="container"&gt;
  &lt;table id="myTable" class="table table-bordered" cellspacing="0" width="100%"&gt;
    &lt;thead class="thead-dark"&gt;
      &lt;tr&gt;
        &lt;th&gt;Program&lt;/th&gt;
        &lt;th&gt;Deliverable&lt;/th&gt;
        &lt;th&gt;To&lt;/th&gt;
        &lt;th&gt;Date&lt;/th&gt;
        &lt;th&gt;Approved&lt;/th&gt;
        &lt;th&gt;Notes&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tfoot class="thead-dark"&gt;
    &lt;tr&gt;
        &lt;th&gt;Program&lt;/th&gt;
        &lt;th&gt;Deliverable&lt;/th&gt;
        &lt;th&gt;To&lt;/th&gt;
        &lt;th&gt;Date&lt;/th&gt;
        &lt;th&gt;Approved&lt;/th&gt;
        &lt;th&gt;Notes&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/tfoot&gt;
  &lt;/table&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>I believe this should be the correct function to send data to the SharePoint list from the DataTable, but it is currently useless because I cannot figure out how to add new rows/data to the datatable.</p>
  <pre><code>function sendData() {
      var urls = [&quot;url1&quot;,&quot;url2&quot;,&quot;url3&quot;,&quot;url4&quot;,&quot;url5&quot;,&quot;url6&quot;,&quot;url7&quot;,&quot;url8&quot;];
          
      var data1 = {
             Program: 'Please provide the Program name here',
             Deliverable: 'Please provide the type of deliverable here',
             To: 'Please provide the recipients email here',
             Date: 'Please provide the submission date here',
             Approved: 'Please provide where or not the deliverable has been approved here',
             Notes: Please provide notes about the deliverable here'
      };
       $.ajax({
          for (i=0; i &lt; urls.length; i++) {
          $.ajax({
                     url: urls[i],
                     method: &quot;POST&quot;,
                                   data: JSON.stringify(data),
                     headers: { &quot;Accept&quot;: &quot;application/json; odata=verbose&quot;,
                                     &quot;X-RequestDigest&quot;: $(&quot;#__REQUESTDIGEST&quot;).val()                                 
                     },
                     success: function (data) {
                                alert('Item added successfully');
                    },
                    error: function (error) {
                        alert(&quot;Error: &quot;+ JSON.stringify(error));
                   }
            });
          }
      });
  }
  </code></pre>