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

时间：2017-11-06 09:16:18

标签： javascript datatables

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

  

DataTables警告：table id = example - 请求的未知参数   第3行第12列的“status”。有关此错误的详细信息，   请参阅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语句中，其他代码工作正常。 我想使用输入文本框的“当前销售”和“结算余额”的值，以便用户可以输入值，它将自动计算，如何在此代码中使用文本框？感谢

2 个答案:

答案 0 :(得分：0)

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

所以为了分解它，DataTables已经为所提供的{parameter}提供了给定行的数据，并且没有数据，或者它是null或undefined（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"
      }
    ]
  });

答案 1 :(得分：0)

基本上这段代码：

    "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的值为{{1} }。要解决此问题，您可以删除if语句。

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

相关问题
最新问题