"Add to cart" ajax button on DataTable - php

Question

I am started to use DataTables because they provide what I need: ready to use pagination, ready to use how many items to show on the table 10, 25 .. etc. And here is the first problem. I want to put one button Add to cart 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:
The table:
<table id="example" class="display table table-striped table-bordered responsive">
<thead>
<tr>
<th>№</th>
<th>Program</th>
<th>Title</th>
<th>Description</th>
<th>Add to Cart</th>
</tr>
</thead>
Here is how I put the custom button at the end
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "response.php",
"aoColumnDefs": [
{
"aTargets": [5],
"mData": null,
"mRender": function (data, type, full) {
return 'Add to cart';
}
}]
});
});
How I trying to put them in the cart
$(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();
}
});
}
and the php part
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<count($_SESSION['upload_title']);$i++)
{
echo "<div class='cart_items'>";
echo "<p>".$_SESSION['upload_title'][$i]."</p>";
echo "<p>".$_SESSION['upload_description'][$i]."</p>";
echo "</div>";
}
exit();
}
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 response.php from where the table is populated.

Answer 1

For your MAJOR problem with getting ID you can make this:
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "response.php",
"aoColumnDefs": [
{
"aTargets": [5],
"mData": null,
"mRender": function(data, type, full) {
return '<a class="btn btn-info btn-sm" href=#' + full[0] + '>' + 'Add to Cart' + '</a>';
}
}
}]
});
});
The mRender Function takes three parameters:
data = The data for this cell, as defined in mData
type = The datatype
(can be ignored mostly)
full = The full data array for this row.