jqxDataAdapter

To show dataAdapter problem

by kapalkat

HTML

<script src="https://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
<link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>
<div id="table"></div>

CSS

table {
  font-family: verdana,arial,sans-serif;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
}

table th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
}

table td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
}

JavaScript

$(document).ready(function() {
  var data = {
    parent_job: 'TEST',
    _id: '1111',
    task_name: 'Test Task',
    start_date: '8/3/2020, 11:48:40.582 AM',
    end_time: '9/9/3000, 12:00:00.0 AM',
  };

  // prepare the data
  var source = {
    datatype: 'json',
    datafields: [
      { name: '_id', type: 'string' },
      { name: 'parent_job', type: 'string' },
      { name: 'task_name', type: 'string' },
      { name: 'start_date', type: 'date' },
      { name: 'end_time', type: 'date' },
    ],
    hierarchy: {
      keyDataField: { name: '_id' },
      parentDataField: { name: 'parent_job' },
    },
    id: '_id',
    sortcolumn: 'end_time',
    sortdirection: 'desc',
    localdata: data,
  };
  var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function(records) {
      // get data records.
      var records = dataAdapter.records;
      console.log(records[0].end_time.getFullYear());
      // get the length of the records array.
      var length = records.length;
      // loop through the records and display them in a table.
      var html =
        "<table border='1'><tr><th align='left'>Id</th><th align='left'>Parent_job</th><th align='left'>Task Name</th><th align='right'>Start Date</th><th align='left'>End Time</th></tr>";
      for (var i = 0; i < length; i++) {
        var record = records[i];
        html += '<tr>';
        html += '<td>' + record._id + '</td>';
        html += '<td>' + record.parent_job + '</td>';
        html += '<td>' + record.task_name + '</td>';
        html += '<td>' + record.start_date + '</td>';
        html += '<td>' + record.end_time + '</td>';
        html += '</tr>';
      }
      html += '</table>';
      $('#table').html(html);
    },
    loadError: function(jqXHR, status, error) {},
    beforeLoadComplete: function(records) {},
  });
  // perform data binding.
  dataAdapter.dataBind();
});