.NET Articles

jQuery to create html table dynamically from json data in dotnet MVC


Example of html design code to create table dynamically

<head id="Head1" runat="server">    
    <script type="text/javascript" src="../../Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            //assign button click event to call function to create html table dynamically
            $("#btnCreateHtmlTable").click(function () {
                CreateHtmlTable();
            });
        }
        );

        function CreateHtmlTable() {

            //Clear result div
            $("#ResultArea").html("");

            //Crate table html tag
            var table = $("<table id=DynamicTable border=1></table>").appendTo("#ResultArea");

            //Create table header row
            var rowHeader = $("<tr></tr>").appendTo(table);
            $("<td></td>").text("Name").appendTo(rowHeader);
            $("<td></td").text("ID").appendTo(rowHeader);
            $("<td></td>").text("Department").appendTo(rowHeader)
            $("<td></td>").text("Salary").appendTo(rowHeader);

            //Get JSON data by calling action method in controller
            $.get('/home/GetEmployeeData', function (data) {
                $.each(data, function (i, value) {

                    //Create new row for each record
                    var row = $("<tr></tr>").appendTo(table);
                    $("<td></td>").text(value.Name).appendTo(row);
                    $("<td></td>").text(value.ID).appendTo(row);
                    $("<td></td>").text(value.Department).appendTo(row);
                    $("<td></td>").text(value.Salary).appendTo(row);
                });
            });
        }

    </script>
</head>
<body>
    <input type="button" id="btnCreateHtmlTable" value="Create HTML table" />
    <div id="ResultArea">
    </div>        
</body>
        
        

Example of controller action code to return JSON data which will be created as table rows

    
    //Action method returns Json result
    public JsonResult GetEmployeeData()
    {
        Employee _employee = new Employee();
        List<Employee> _emplyeeList = new List<Employee>();
        _emplyeeList.Add(new Employee() { Name = "Steve", ID = "1", Department = "IT", Salary = 1000 });
        _emplyeeList.Add(new Employee() { Name = "Samules", ID = "2", Department = "Telecom", Salary = 2000 });
        _emplyeeList.Add(new Employee() { Name = "Edward", ID = "3", Department = "Sales", Salary = 3000 });

        return Json(_emplyeeList, JsonRequestBehavior.AllowGet);
    }
    
    //Employee class
    public class Employee
    {
        public string Name { get; set; }
        public string ID { get; set; }
        public string Department { get; set; }
        public int Salary { get; set; }
    }
    

Out put

Summary of the example code

  • Created a button btnCreateHtmlTable
  • Created button click event $("#btnCreateHtmlTable").click() in Document ready function
  • jquery function CreateHtmlTable() creates the HTML table dynamically
  • Created table html tag and header row
  • Get the JSON result from $.get('/home/GetEmployeeData', function (data) {})
  • Create table row from json result using method $.each(data, function (i, value){})