MVC - jQuery - DataTables 将数组传递给 datatable.js答案

【问题标题】：MVC - jQuery - DataTables pass array to datatable.jsMVC - jQuery - DataTables 将数组传递给 datatable.js
【发布时间】：2018-07-18 23:03:57
【问题描述】：

我只需要第二眼，我正在使用 MVC jQuery 和 DataTables 我有 5 个文本框和一个按钮，单击时我运行一个将数据添加到对象数组的脚本，如下所示：

var productarray = new Array();

function addproduct() {
  if ($("#ReqQuant").val() == null) {
    alert("Please add product quantity")
  } else if ($("#productprice").val() == null) {
    alert("PLease select product")
  } else {
    var productname = $("#productname").val();
    var productprice = $("#productprice").val();
    var productquantity = $("#ReqQuant").val();
    var producttotalprice = $("#OrderDetailProductTotalPricetxt").val();
    var producttax = $("#OrderDetailProductTaxTXT").val();
    calculatesubtotal(producttotalprice);
    productarray.push({
      A_productname: productname,
      A_productprice: productprice,
      A_productquantity: productquantity,
      A_producttotalprice: producttotalprice,
      A_producttax: producttax
    });
    var arrayjson = JSON.stringify(productarray);
    $('#RetailQouteTable').DataTable().ajax.reload();
  }

然后我已经在 HTMl 部分中配置了一个表，如下所示：

<table id="RetailQouteTable">
  <tr>
    @*
    <th>Product #</th>*@
    <th>Product Name</th>
    <th>Required Quantity</th>
    <th>Unit Price</th>
    <th>Total Price</th>
    <th>Tax</th>
  </tr>
</table>

下一步是在脚本部分配置数据表，如下所示：

$('#RetailQouteTable').DataTable({                       
  "data": "arrayjson",
  "columns":
  [
    {"data":"A_productname", title: "Product Name"},  
    {"data": "A_productquantity", title: "Required Quantity"},
    {"data": "A_productprice", title: "Unit Price"},
    {"data": "A_producttotalprice", title: "Total Price"},
    {"data": "A_producttax", title: "Tax"} 
  ]
});

所以，当我点击添加按钮时，数据被插入到数组中，然后我收到这个错误：

DataTables 警告：表 id=RetailQouteTable - JSON 响应无效。

我还想添加“arrayjson”的格式，看起来像这样

"[{\"A_productname\":\"2\",\"A_productprice\":\"2.50\",\"A_productquantity\":\"10\",\"A_producttotalprice\":\"25\",\"A_producttax\":\"3.25\"},{\"A_productname\":\"3\",\"A_productprice\":\"4.90\",\"A_productquantity\":\"20\",\"A_producttotalprice\":\"98\",\"A_producttax\":\"12.74\"}]"

那么我错过了什么？

【问题讨论】：

由于您没有包含控制器操作方法的内容，请在浏览器的开发控制台中检查响应。如果不是 JSON，您可能应该删除 "arrayjson" 中的双引号。

标签： javascript jquery arrays asp.net-mvc datatable

【解决方案1】：

我认为这一行： $('#RetailQouteTable').DataTable().ajax.reload();导致了错误。也尝试删除“arrayjson”的双引号。

【讨论】：

语法不正确，但无论如何我试过它没有通过。
另外，您想直接在 DataTable 中添加数据，这对我来说没有意义，因为刷新页面时这些数据将被删除。

【解决方案2】：

它有点旧，但它可能会有所帮助。

以上代码有多个错误：

1) 使用 DataTables.js

时始终使用 <thead> 和 <tbody> 标签

编辑你的 HTML 表格到下面：

<table id="RetailQouteTable">
  <thead>
    <tr>
      @*
      <th>Product #</th>*@
      <th>Product Name</th>
      <th>Required Quantity</th>
      <th>Unit Price</th>
      <th>Total Price</th>
      <th>Tax</th>
    </tr>
  <thead>
  <tbody>
  .
  .
  </tbody>
</table>

2) 将您的 DataTable 调用更改为以下：

$('#RetailQouteTable').DataTable({                       
  data: arrayjson,
  columns:
  [
    {title: "Product Name"},  
    {title: "Required Quantity"},
    {title: "Unit Price"},
    {title: "Total Price"},
    {title: "Tax"} 
  ]
});

在arrayjson 周围使用逗号可能会认为它是一个字符串，这是不正确的。

为避免任何不便，请使用以下数据格式。即数组数组，例如

var arrayjson = [
    [ "2", "2.50", "10", "25", "3.25"],
    [ "3", "4.90", "20", "98", "12.74" ]
];

Here 是工作示例。

希望这会有所帮助。

【讨论】：