add columns dynamically in jquery data table and insert data

Question

I have a json like this

{
  Date: "2017-11-07",
  Items: [
 {
   count: "160",
   period: "0",
 }
 ]
 },
 {
  Date: "2017-11-08",
  Items: [
  {
   count: "106",
   period: "0",
  },
  {
    transCount: "298",
    period: "1",
    tranType: "new"
  }
 ]
 },

For every date I want to create a new column and insert 'count' value of items array in that column. so far I have done this

 $("#dtable-users").append('<table id="dtchurn" class="table table-striped table-bordered"><thead></thead><tbody id="tbody"></tbody></table>');
      for(i=0; i<= jsonStr.length;i++)  
      {   
         var tableColumn = "<th> " + jsonStr[i].Date + "  </th>";
         $("#tbody").append(tableColumn)

         for(j=0; j < jsonStr[i].Items.length;j++)
         {
           var tablerow = "<tr><td>"+ parseInt(jsonStr[i].Items[j].transCount) +"</td></tr>"
           $('#tbody').append(tablerow);
         }  
    }

I'm having problem in adding columns, my columns are also inserting as rows.

Could you please show the real JSON? The above is an excerpt from something larger, at least the begging and the end of the JSON should be present. — davidkonrad
– davidkonrad, Commented Dec 18, 2017 at 12:18

Mohammed Khalid · Accepted Answer · 2017-12-18 10:43:44Z

1

$("#dtable-users").append('<table id="dtchurn" class="table table-striped table-bordered"><thead></thead><tbody id="tbody"></tbody></table>');
  var tbl_head = '',tbl_rows=''
  for(i=0; i<= jsonStr.length;i++)  
  {   
     var tableColumn = "<th> " + jsonStr[i].Date + "  </th>";
     tbl_head + = tableColumn;

     for(j=0; j < jsonStr[i].Items.length;j++)
     {
       var tablerow = "<tr><td>"+ parseInt(jsonStr[i].Items[j].transCount) +"</td></tr>"
       tbl_rows + = tablerow;
     }
     if(i===jsonStr.length-1)
     {
        $("#tbody").append(tbl_head);
        $('#tbody').append(tbl_rows);
     }
}

answered Dec 18, 2017 at 10:43

Mohammed Khalid

262 bronze badges

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

1 Comment

Mohammed Khalid Over a year ago

Try this but i haven't tested it

Collectives™ on Stack Overflow

add columns dynamically in jquery data table and insert data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related