如何在数据表中应用条件-jQuery的DataTables Table插件

Question

我正在尝试使用DataTables插件，但显示出一个错误：

DataTables警告：表id = example-请求的第3行第12列的未知参数“状态”。有关此错误的更多信息，请参见http://datatables.net/tn/4

请协助我，为什么它会显示此错误？ 如果cbSTotal > 0仅添加那些值，我想应用条件。 它添加正确，但还会出现错误警报？

 $(document).ready(function() { $.each(dataSet, function(i, it) { console.log(it); it.cbTotal = it.nsp * it['closing-balance']; it.csTotal = it.nsp * it['current-sales']; it.csMTotal = Math.round((1.5) * it.csTotal); it.cbSTotal = it.csMTotal - it.cbTotal; if (it.cbSTotal > 0) { it.status = it.cbSTotal; } }); // Table definition var dtapi = $('#example').DataTable({ data: dataSet, "deferRender": false, "footerCallback": function(tfoot, data, start, end, display) { var api = this.api(); var p = api.column(7).data().reduce(function(a, b) { return a + b; }, 0); $(api.column(6).footer()).html(p); $("#cbtotal").val(p); var q = api.column(8).data().reduce(function(a, b) { return a + b; }, 0); $(api.column(5).footer()).html(q); $("#cstotal").val(q); var r = api.column(9).data().reduce(function(a, b) { return a + b; }, 0); $(api.column(10).footer()).html(r); $("#csMtotal").val(r); var s = api.column(11).data().reduce(function(a, b) { return Math.abs(a + b); }, 0); $(api.column(11).footer()).html(s); $("#cbStotal").val(s); var t = api.column(12).data().reduce(function(a, b) { return a + b; }, 0); $(api.column(12).footer()).html(t); $("#statustotal").val(t); }, "order": [1], "columns": [ // rest of the columns { data: "distributor_name" }, { data: "order_date" }, { data: "product_name" }, { data: "nsp" }, { data: "region" }, { data: "current-sales" }, { data: "closing-balance" }, { data: "cbTotal" }, { data: "csTotal" }, { data: "csMTotal", "visible": false, "searchable": false }, { data: "current-sales", "render": function(data) { return csM = Math.round(data * 1.5); } }, { data: "cbSTotal" }, { data: "status" } ] }); }); // "visible": false, // "searchable": false var dataSet = [{ "distributor_name": "Hassan Traders", "order_date": "12-10-2017", "product_name": "Satou", "nsp": 230, "region": "Dera Ismail Khan", "pro_ID": 02, "current-sales": 50, "closing-balance": 23 }, { "distributor_name": "Hassan Traders", "order_date": "12-10-2017", "product_name": "panadol", "nsp": 191, "region": "Dera Ismail Khan", "pro_ID": 03, "current-sales": 152, "closing-balance": 131 }, { "distributor_name": "Hassan Traders", "order_date": "12-10-2017", "product_name": "disprine", "nsp": 191, "region": "Dera Ismail Khan", "pro_ID": 04, "current-sales": 40, "closing-balance": 37 }, { "distributor_name": "Hassan Traders", "order_date": "12-10-2017", "product_name": "panadol", "nsp": 120, "region": "Dera Ismail Khan", "pro_ID": 03, "current-sales": 8, "closing-balance": 173 }]; 

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" /> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <table width="100%" class="display" cellspacing="0" id="example"> <thead> <tr> <th>Distributor Name</th> <th>Order Date</th> <th>Product Name</th> <th>NSP</th> <th>Region</th> <th>Current Sales</th> <th>Closing Balance</th> <th>Total Current Sales</th> <th>Total Closing Balance</th> <th>Total Closing Balance * 1.5</th> <th>Current Sales * 1.5</th> <th>(-)Closing Balance</th> <th>Status</th> </tr> </thead> <tfoot> <tr> <th>Distributor Name</th> <th>Order Date</th> <th>Product Name</th> <th>NSP</th> <th>Region</th> <th>Current Sales</th> <th>Closing Balance</th> <th>Total Current Sales</th> <th>Total Closing Balance</th> <th>Total Closing Balance * 1.5</th> <th>Current Sales * 1.5</th> <th>(-)Closing Balance</th> <th>Status</th> </tr> </tfoot> <tbody> </tbody> <!-- /.panel-heading --> </table> 

错误在if语句中，其他代码运行正常。 我想使用输入文本框来表示“当前销售额”和“结算余额”的值，以便用户可以输入值，它将自动计算，如何在此代码中使用文本框？ 谢谢

Answer 1

DataTables中的每个单元格都请求数据，并且当DataTables尝试获取某个单元格的数据而无法执行此操作时，它将触发警告，告知您数据在预期的位置不可用。

因此，要分解它，DataTables已请求提供给定{parameter}的给定行的数据，那里没有数据，或者它为null或未定义（DataTables不知道，默认情况下如何显示这些参数）

您的代码应为

var dataSet = [{
  "distributor_name": "Hassan Traders",
  "order_date": "12-10-2017",
  "product_name": "Satou",
  "nsp": 230,
  "region": "Dera Ismail Khan",
  "pro_ID": 02,
  "current-sales": 50,
  "closing-balance": 23
}, {
  "distributor_name": "Hassan Traders",
  "order_date": "12-10-2017",
  "product_name": "panadol",
  "nsp": 191,
  "region": "Dera Ismail Khan",
  "pro_ID": 03,
  "current-sales": 152,
  "closing-balance": 131
}, {
  "distributor_name": "Hassan Traders",
  "order_date": "12-10-2017",
  "product_name": "disprine",
  "nsp": 191,
  "region": "Dera Ismail Khan",
  "pro_ID": 04,
  "current-sales": 40,
  "closing-balance": 37
}, {
  "distributor_name": "Hassan Traders",
  "order_date": "12-10-2017",
  "product_name": "panadol",
  "nsp": 120,
  "region": "Dera Ismail Khan",
  "pro_ID": 03,
  "current-sales": 8,
  "closing-balance": 173
}];
$.each(dataSet, function(i, it) {
    console.log(it);
    it.cbTotal = it.nsp * it['closing-balance'];
    it.csTotal = it.nsp * it['current-sales'];
    it.csMTotal = Math.round((1.5) * it.csTotal);
    it.cbSTotal = it.csMTotal - it.cbTotal;
    if (it.cbSTotal > 0) {
      it.status = it.cbSTotal;
    }else{
    it.status = 0;
    }

  });
// Table definition
  var dtapi = $('#example').DataTable({
    data: dataSet,
    "deferRender": false,
    "footerCallback": function(tfoot, data, start, end, display) {
      var api = this.api();
      var p = api.column(7).data().reduce(function(a, b) {
        return a + b;
      }, 0);
      $(api.column(6).footer()).html(p);
      $("#cbtotal").val(p);

      var q = api.column(8).data().reduce(function(a, b) {
        return a + b;
      }, 0);
      $(api.column(5).footer()).html(q);
      $("#cstotal").val(q);

      var r = api.column(9).data().reduce(function(a, b) {
        return a + b;
      }, 0);
      $(api.column(10).footer()).html(r);
      $("#csMtotal").val(r);

      var s = api.column(11).data().reduce(function(a, b) {
        return Math.abs(a + b);
      }, 0);
      $(api.column(11).footer()).html(s);
      $("#cbStotal").val(s);

      var t = api.column(12).data().reduce(function(a, b) {
        return a + b;
      }, 0);
      $(api.column(12).footer()).html(t);
      $("#statustotal").val(t);


    },
    "order": [1],
    "columns": [
      // rest of the columns
      {
        data: "distributor_name"
      }, {
        data: "order_date"
      }, {
        data: "product_name"
      }, {
        data: "nsp"
      }, {
        data: "region"
      }, {
        data: "current-sales"
      }, {
        data: "closing-balance"
      }, {
        data: "cbTotal"
      }, {
        data: "csTotal"
      }, {
        data: "csMTotal",
        "visible": false,
        "searchable": false
      }, {
        data: "current-sales",
        "render": function(data) {
          return csM = Math.round(data * 1.5);
        }
      }, {
        data: "cbSTotal"
      }, {
        data: "status"
      }
    ]
  });

Answer 2

因此，基本上这段代码：

    "columns": [
      // rest of the columns
      {
        data: "distributor_name"
      }, {
        data: "order_date"
      }, {
        data: "product_name"
      }, {
        data: "nsp"
      }, {
        data: "region"
      }, {
        data: "current-sales"
      }, {
        data: "closing-balance"
      }, {
        data: "cbTotal"
      }, {
        data: "csTotal"
      }, {
        data: "csMTotal",
        "visible": false,
        "searchable": false
      }, {
        data: "current-sales",
        "render": function(data) {
          return csM = Math.round(data * 1.5);
        }
      }, {
        data: "cbSTotal"
      }, {
        data: "status"
      }
    ]

正在尝试获取data.status ，但这仅在it.cbSTotal > 0创建，并且它不在最后一行，因为it.cbSTotal值为-19320 。 要解决此问题，您可以删除if语句。

 $(document).ready(function() { $.each(dataSet, function(i, it) { console.log(it); it.cbTotal = it.nsp * it['closing-balance']; it.csTotal = it.nsp * it['current-sales']; it.csMTotal = Math.round((1.5) * it.csTotal); it.cbSTotal = it.csMTotal - it.cbTotal; it.status = it.cbSTotal; }); var dtapi = $('#example').DataTable({ data: dataSet, "deferRender": false, "footerCallback": function(tfoot, data, start, end, display){ var api = this.api(); var p = api.column(7).data().reduce(function(a, b) { return a + b; }, 0); $(api.column(6).footer()).html(p); $("#cbtotal").val(p); var q = api.column(8).data().reduce(function(a, b) { return a + b; }, 0); $(api.column(5).footer()).html(q); $("#cstotal").val(q); var r = api.column(9).data().reduce(function(a, b) { return a + b; }, 0); $(api.column(10).footer()).html(r); $("#csMtotal").val(r); var s = api.column(11).data().reduce(function(a, b) { return Math.abs(a + b); }, 0); $(api.column(11).footer()).html(s); $("#cbStotal").val(s); var t = api.column(12).data().reduce(function(a, b) { return a + b; }, 0); $(api.column(12).footer()).html(t); $("#statustotal").val(t); }, "order": [1], "columns": [ {data: "distributor_name"}, {data: "order_date"}, {data: "product_name"}, {data: "nsp"}, {data: "region"}, {data: "current-sales"}, {data: "closing-balance"}, {data: "cbTotal"}, {data: "csTotal"}, {data: "csMTotal","visible": false,"searchable": false}, {data: "current-sales","render": function(data) {return csM = Math.round(data * 1.5);}}, {data: "cbSTotal"}, {data: "status"} ] }); }); var dataSet = [{ "distributor_name": "Hassan Traders", "order_date": "12-10-2017", "product_name": "Satou", "nsp": 230, "region": "Dera Ismail Khan", "pro_ID": 02, "current-sales": 50, "closing-balance": 23 }, { "distributor_name": "Hassan Traders", "order_date": "12-10-2017", "product_name": "panadol", "nsp": 191, "region": "Dera Ismail Khan", "pro_ID": 03, "current-sales": 152, "closing-balance": 131 }, { "distributor_name": "Hassan Traders", "order_date": "12-10-2017", "product_name": "disprine", "nsp": 191, "region": "Dera Ismail Khan", "pro_ID": 04, "current-sales": 40, "closing-balance": 37 }, { "distributor_name": "Hassan Traders", "order_date": "12-10-2017", "product_name": "panadol", "nsp": 120, "region": "Dera Ismail Khan", "pro_ID": 03, "current-sales": 8, "closing-balance": 173 }]; 

 <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" /> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <table width="100%" class="display" cellspacing="0" id="example"> <thead> <tr> <th>Distributor Name</th> <th>Order Date</th> <th>Product Name</th> <th>NSP</th> <th>Region</th> <th>Current Sales</th> <th>Closing Balance</th> <th>Total Current Sales</th> <th>Total Closing Balance</th> <th>Total Closing Balance * 1.5</th> <th>Current Sales * 1.5</th> <th>(-)Closing Balance</th> <th>Status</th> </tr> </thead> <tfoot> <tr> <th>Distributor Name</th> <th>Order Date</th> <th>Product Name</th> <th>NSP</th> <th>Region</th> <th>Current Sales</th> <th>Closing Balance</th> <th>Total Current Sales</th> <th>Total Closing Balance</th> <th>Total Closing Balance * 1.5</th> <th>Current Sales * 1.5</th> <th>(-)Closing Balance</th> <th>Status</th> </tr> </tfoot> <tbody> </tbody> <!-- /.panel-heading --> </table>