DataTable 上的“添加到购物车”ajax 按钮

Question

我开始使用DataTables，因为它们提供了我需要的东西：准备使用分页，准备使用在桌子上显示多少项目10，25 .. 等等。这是第一个问题。我想在最后放置一个按钮Add to cart，并使用ajax 将项目放在篮子中，稍后将作为zip 下载。到目前为止，我能够放置按钮，但我对 ajax 和 jquery 的东西很陌生，不知道如何做购物车的事情。这是我所拥有的：

桌子：

<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>

这是我将自定义按钮放在最后的方式

$(document).ready(function() {
  $('#example').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": "response.php", 
    "aoColumnDefs": [
    {
        "aTargets": [5],
        "mData": null,
        "mRender": function (data, type, full) {
            return '<a href="#" id="total_items" onclick="(\''+ full[0] +'\');">Add to cart</a>';
        }            

    }]
 });
});

我如何尝试将它们放入购物车

   $(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();
  }
 });

}

和php部分

  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();  
}

到目前为止，我看到的主要问题是如何传递我存储在购物车中的商品的 ID。在数据表中，项目的 ID 位于第一个 №。然后我不知道如何用这个ajax把它传递给购物车。 如果需要，我还可以显示填充表格的response.php 的 php 部分。

Answer 1

对于您的MAJOR 获取 ID 的问题，您可以这样做：

$(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>';
      }
    }            

    }]
   });
 });

mRender 函数接受三个参数：

data = 此单元格的数据，在 mData 中定义

type = 数据类型 （大部分可以忽略）

full = 该行的完整数据数组。