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

Question

I am trying to use the DataTables plugin but it is showing me an error:

DataTables warning: table id=example - Requested unknown parameter 'status' for row 3, column 12. For more information about this error, please see http://datatables.net/tn/4

Please assist me why it is showing this error? I want to apply condition if cbSTotal > 0 add only those values. It is adding correctly but also an error alert?

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

Error is in the if statement, other code is working fine. and i want to use input textbox for values of "Current Sales" and "Closing Balance" so user can enter values and it will automatically calculate, how to use textbox in this code? Thanks

Answer 1

Each cell in DataTables requests data, and when DataTables tries to obtain data for a cell and is unable to do so, it will trigger a warning, telling you that data is not available where it was expected to be.

So to break it down, DataTables has requested data for a given row, of the {parameter} provided and there is no data there, or it is null or undefined (DataTables doesn't know, by default how to display these parameters)

Your code should be

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

So basically this bit of your code:

    "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"
      }
    ]

Is trying to get the data.status , but that is only created if it.cbSTotal > 0 , and it isn't on the last row, because the value of it.cbSTotal is -19320 . To fix this, you can remove the if statement.

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