Click here to Skip to main content
14,924,395 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hi Guys i hope all are doing well!

Initially in c# method i am getting data from sql query like below

UserNumber 2015-01-01 2015-01-02 2015-01-03 ....
emp001 10am 11am 6pm ....
emp002 11am 10p 7pm ....

Then i am serializing this data using below code
C#
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
       List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
       Dictionary<string, object> row;
       foreach (DataRow dr in dt.Rows)
       {
           row = new Dictionary<string, object>();
           foreach (DataColumn col in dt.Columns)
           {
               row.Add(col.ColumnName, dr[col]);
           }
           rows.Add(row);
       }
       return serializer.Serialize(rows);


Then after i am returning this data to json and i am capturing there, using below code

JavaScript
$.ajax({
               type: "POST",
               url: "Default.aspx/GetData",
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               data: JSON.stringify(obj),
               success: function (response) {
                   var tabledata = response.d;
               },
               failure: function (response) {
                   alert(response.d);
               }
           });


Now i want to insert this data into html table but here the big deal is the column names will change every time depends on user selected dates. SO how can i solve this.
Please help me and thanks in advance.
Posted
Updated 21-Dec-20 22:04pm
Comments
Krunal Rohit 28-Oct-15 3:43am
   
Rather return the DataTable. Because based on your condition table will have the columns and rows. And you can form the HTML table from that. (with columns and rows)

-KR
Hareesh Malli 28-Oct-15 3:50am
   
I have some client limitations. For that i have to create table using javascript only.
F-ES Sitecore 28-Oct-15 6:33am
   
What have you tried so far? Have you googled how to build a table from json using jQuery?
Sreekanth Mothukuru 28-Oct-15 15:25pm
   
Try to use handlebarsJs library with a template with some conditions which work on the Json data you feed...

check out this link

http://www.dotnetpickles.com/2014/04/json-to-html-table.html[^]

hope this would help
   
Comments
Hareesh Malli 29-Oct-15 0:52am
   
Thanks Umar_Farooq for you replay, your article is good but i got some other way to do my stuff and now i am gonna post my answer below. Thanks again dude.....
Finally i solved my stuff. Here the code is

JavaScript
$.ajax({
                type: "POST",
                url: "Default.aspx/GetData",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                data: JSON.stringify(obj),
                success: function (response) {

                    var tabledata = response.d;
                    var codes = jQuery.parseJSON(tabledata);
                    console.log(codes);
                    var entry;
                    var name;
                    entry = codes[0];
                    
                    if (document.getElementById("ScheduleTable"))
                    {
                        var table = document.getElementById("ScheduleTable");
                        var rowCount = table.rows.length;
                        table.parentNode.removeChild(table);
                    }

                    table = $('<table></table>').attr({ id: "ScheduleTable" });
                    var th = $('<tr></tr>').appendTo(table);

                    var d1 = document.getElementById("datepicker").value;
                    var d2 = document.getElementById("datepicker1").value;
                    var date1 = new Date(d1);
                    var date2 = new Date(d2);
                    var timeDiff = Math.abs(date2.getTime() - date1.getTime());
                    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
                    diffDays = diffDays + 1;

                    $('<td></td>').text("Employee Code").css('background-color', 'lightblue').appendTo(th);
                    
                    for (var k = 0; k < diffDays; k++) {
                        var date = new Date(Date.parse(d1));
                        date.setDate(date.getDate() + k);
                        var newDate = date.toDateString();
                        newDate = new Date(Date.parse(newDate));
                        var test1 = (newDate.toString('dd/mm/yyyy'));
                        var test = test1.substring(0, 10);
                        $('<td></td>').text(test).css('background-color', 'lightblue').appendTo(th);
                    }

                    $.each(codes, function (key, value)
                    {
                        var row = $('<tr></tr>').appendTo(table);
                    });

                    console.log("table:" + table.html());
                    table.appendTo("#box");
                },
                failure: function (response) {
                    alert(response.d);
                }
            });


And HTML stuff is

HTML
 <div>
            <p>Employee Count:
                <input type="text" id="EmpCount" /></p>
            <p>Pick a Date:
                <input type="text" id="datepicker" />
                 <input type="text" id="datepicker1" /></p>
            <p><input type="button" id="submit" value="Submit" onclick="showDetail();"/></p>
        </div>
        <div id="box" style="width:100%">
</div>
   

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900