如何在數據表中應用條件-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>