Use local json data inside dataTable

Question

The Jquery Code:

$(document).ready(function() {
  var total = [];
  $.ajax({
    url: 'user.json',
    dataType: 'json',
    success: function(json) {
      // get the `airport` array 
      var device = json.siteList;
      var j = 1;

      // loop through the array to populate your list
      $.each(device, function(i, sites) {
        // console.log(sites.siteName)
        // $('#data_table').append("<tr>" + "<td>" + sites.siteName + "</td>" + "</tr>");
        $.each(sites.deviceList, function(i, values) {
          item = {}
          item['siteName'] = sites.siteName;
          item["deviceName"] = values.deviceName;
          item["count"] = values.count;
          total.push(item);
        });
      });

      console.log(total);
      $('#example').DataTable({
        "aaData": total,
        "aoColumns": [{
            "sTitle": "siteName"
          },
          {
            "sTitle": "deviceName"
          },
          {
            "sTitle": "count"
          },
        ]
      });
    }
  });
});

The total variable output comes from user.json file where nested format json data is stored so i first converted it to normal json data and now i want to use it inside dataTable method The output of total variable is given below:

0: {siteName: "Site1", deviceName: "S1device1", count: "1"}
1: {siteName: "Site1", deviceName: "S1device2", count: "2"}
2: {siteName: "Site2", deviceName: "S2device1", count: "1"}
3: {siteName: "Site2", deviceName: "S2device2", count: "2"}
4: {siteName: "Site3", deviceName: "S3device1", count: "1"}
5: {siteName: "Site3", deviceName: "S3device2", count: "2"}
length: 6

Facing problem to use it please help me out, Any help will be highly appreciated , Thank you in advance..........

Karan · Accepted Answer · 2020-09-01 13:26:43Z

0

You have to use mData property along with sTitle to define which column should receive which data. Like "aoColumns": [{"sTitle": "siteName", "mData": "siteName", },...].

Your $('#example').DataTable({...}); code will be like below.

$('#example').DataTable({
  "aaData": total,
  "aoColumns": [{
      "sTitle": "siteName",
      "mData": "siteName"
    },
    {
      "sTitle": "deviceName",
      "mData": "deviceName"
    },
    {
      "sTitle": "count",
      "mData": "count"
    },
  ]
});

To add checkbox you can refer Add html element within td after Ajax request in jQuery DataTables.

You should update code like below.

$('#example').DataTable({
  "aaData": total,
  "columns": [{
      "data": "siteName",
    },
    {
      "data": "deviceName"
    },
    {
      "data": "count"
    },
    {
      render: function(data, type, row) {
        return '<input type="checkbox" />'
      }
    }
  ]
});

edited Sep 1, 2020 at 13:26

answered Sep 1, 2020 at 12:24

Karan

12.7k3 gold badges31 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Swarnadeep Over a year ago

hey how can i add check box in it can u help bro please?

Collectives™ on Stack Overflow

Use local json data inside dataTable

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related