1
votes

I'm using dataTables to make table for my json data. I recieve data from server and that is like:

var BillingDate = [
          {"branchcode":"668",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.649717",
          "LastY":"52.488193",
          "flag":"1",
          "flag_Title":null
          },
          {
            "branchcode":"669",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.712585",
          "LastY":"52.935543",
          "flag":"1",
          "flag_Title":null
          },
          {"branchcode":"668",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.649717",
          "LastY":"52.488193",
          "flag":"1",
          "flag_Title":null
          },
          {
            "branchcode":"669",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.712585",
          "LastY":"52.935543",
          "flag":"1",
          "flag_Title":null
          },
          {"branchcode":"668",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.649717",
          "LastY":"52.488193",
          "flag":"1",
          "flag_Title":null
          },
          {
            "branchcode":"669",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.712585",
          "LastY":"52.935543",
          "flag":"1",
          "flag_Title":null
          },
          {"branchcode":"668",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.649717",
          "LastY":"52.488193",
          "flag":"1",
          "flag_Title":null
          },
          {
            "branchcode":"669",
          "saleyear":"99",
          "saleprd":"3",
          "LastX":"36.712585",
          "LastY":"52.935543",
          "flag":"1",
          "flag_Title":null
          }
  
        ];

and my table code is like:

function CreateTablePagination(ID,data) {
        $(ID).DataTable( {
            data: data,
            columns: [
                { "title": "branchcode" },
                { "title": "year" },
                { "title": "period" },
                { "title": "LastX" },
                { "title": "LastY" },
                { "title": "flag" }
            ]
        } );
    }

I've tried debugger and console.log. both showed my data clearly, but there is no data in table because of thr error.

the div container where my code is there is like:

<div class="ChartDiv">

    <table id="OMID_DetailTable" class="display" width="100%"></table>
          <div id="chartdiv">
          </div>
</div>

but I keep recieving error for :

DataTables warning: table id={id} - Requested unknown parameter '{parameter}' for row {row-index}, column{column-index}`

does anyone know why? and the solution?

2

2 Answers

1
votes

Assuming you have your HTML table defined without any explicit rows, something like this...

<table id="example" class="display dataTable cell-border" style="width:100%">
</table>

...then your DataTable options need to be configured like the following:


  var BillingDate = [ {...}, {...}, ..., {...} ];

  $(document).ready(function() {

    var table = $('#example').DataTable( {
      data: BillingDate,
      columns: [
        { "title": "branchcode",
          "data": "branchcode" },
        { "title": "year",
          "data": "saleyear" },
        { "title": "period",
          "data": "saleprd" },
        { "title": "LastX", 
          "data": "LastX" },
        { "title": "LastY",
          "data": "LastY" },
        { "title": "flag",
          "data": "flag" }
      ]
    } );

  } );

Things to note:

  1. Because your JSON data array is in a variable called BillingDate, this is the name you need to use in your data table:
data: BillingDate

This tells DataTables where to start, when iterating over the array of row data.

  1. Then, you can declare your columns one-by-one - by providing a column heading using title, and a datasource using data. Each data value must exactly match a name used in your JSON objects (one object per row).
0
votes

Just put your data set in an array rather than object:

    var dataSet = [
  ["668","99","3","36.649717","52.488193","1"],
  ["668","99","3","36.649717","52.488193","1"],
  ["668","99","3","36.649717","52.488193","1"],
  ["668","99","3","36.649717","52.488193","1"]
];

Codepen example