Click here to Skip to main content
15,843,623 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 8-Aug-21 20:50pm
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
 
Share this answer
 
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>
 
Share this answer
 

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