title: "Add to cart" ajax button on DataTable
body: <p>I am started to use <a href="https://www.datatables.net/" rel="nofollow">DataTables</a> because they provide what I need: ready to use pagination, ready to use how many items to show on the table <code>10</code>, <code>25</code> .. etc. And here is the first problem. I want to put one button <code>Add to cart</code> at the end and with ajax to place items in basket which will downloaded later as zip. So far I was able to put the button but I'm very new in ajax and jquery stuff and can't figured out how to do the cart things. Here is what I have:</p>
  
  <p>The table:</p>
  
  <pre><code>&lt;table id="example" class="display table table-striped table-bordered responsive"&gt;
                      &lt;thead&gt;
                          &lt;tr&gt;
                              &lt;th&gt;№&lt;/th&gt;
                              &lt;th&gt;Program&lt;/th&gt;
                              &lt;th&gt;Title&lt;/th&gt;
                              &lt;th&gt;Description&lt;/th&gt;                                
                              &lt;th&gt;Add to Cart&lt;/th&gt;
                          &lt;/tr&gt;
                      &lt;/thead&gt;
  </code></pre>
  
  <p>
  Here is how I put the custom button at the end</p>
  
  <pre><code>$(document).ready(function() {
    $('#example').DataTable( {
      "processing": true,
      "serverSide": true,
      "ajax": "response.php", 
      "aoColumnDefs": [
      {
          "aTargets": [5],
          "mData": null,
          "mRender": function (data, type, full) {
              return '&lt;a href="#" id="total_items" onclick="(\''+ full[0] +'\');"&gt;Add to cart&lt;/a&gt;';
          }            
  
      }]
   });
  });
  </code></pre>
  
  <p>How I trying to put them in the cart</p>
  
  <pre><code>   $(document).ready(function(){
  
    $.ajax({
      type:'post',
      url:'store_items.php',
      data:{
        total_cart_items:"totalitems"
      },
      success:function(response) {
        document.getElementById("total_items").value=response;
      }
    });
  
  });
  
  function cart(id)
  {
    var ele=document.getElementById(upload_id);
    var upload_title=document.getElementById("upload_title").value;
    var upload_description=document.getElementById("upload_description").value;
  
    $.ajax({
      type:'post',
      url:'store_items.php',
      data:{
        upload_title:upload_title,
        upload_description:upload_description
      },
      success:function(response) {
        document.getElementById("total_items").value=response;
      }
    });
  
  }
  
  function show_cart()
  {
    $.ajax({
    type:'post',
    url:'store_items.php',
    data:{
      showcart:"cart"
    },
    success:function(response) {
      document.getElementById("mycart").innerHTML=response;
      $("#mycart").slideToggle();
    }
   });
  
  }
  </code></pre>
  
  <p>and the php part</p>
  
  <pre><code>  session_start();
  
  if(isset($_POST['total_cart_items']))
  {
      echo count($_SESSION['upload_title']);
      exit();
  }
  
  if(isset($_POST['upload_title']))
  {
      $_SESSION['upload_title'][]=$_POST['upload_title'];
      $_SESSION['upload_description'][]=$_POST['upload_description'];    
      echo count($_SESSION['upload_title']);
      exit();
  }
  
  if(isset($_POST['showcart']))
  {
     for($i=0;$i&lt;count($_SESSION['upload_title']);$i++)
     {
         echo "&lt;div class='cart_items'&gt;";      
         echo "&lt;p&gt;".$_SESSION['upload_title'][$i]."&lt;/p&gt;";
         echo "&lt;p&gt;".$_SESSION['upload_description'][$i]."&lt;/p&gt;";
         echo "&lt;/div&gt;";
     }
     exit();  
  }
  </code></pre>
  
  <p>So far the main problem that I see is how to pass the ID of the item which I store in cart. On the datatable ID of the item is on the first №. Then I'm not sure how to pass it to the cart with this ajax.
  If need I can show also the php part of <code>response.php</code> from where the table is populated.</p>